diff --git a/docs/fix/getting-started-typos/01-get-started/installation.html b/docs/fix/getting-started-typos/01-get-started/installation.html
index 8d6ec71751..5f2e7be1dc 100644
--- a/docs/fix/getting-started-typos/01-get-started/installation.html
+++ b/docs/fix/getting-started-typos/01-get-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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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-get-started/installation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/01-get-started/installation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-get-started/installation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-get-started\\\",\\\"installation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18a:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Installation\"}],\"Willkommen in der Flow Dokumentation!\",\"$undefined\"]}],[\"$\",\"$L189\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18a\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-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/fix/getting-started-typos/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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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-get-started/installation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/01-get-started/installation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-get-started/installation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-get-started\\\",\\\"installation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18a:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Installation\"}],\"Willkommen in der Flow Dokumentation!\",\"$undefined\"]}],[\"$\",\"$L189\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18a\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/01-get-started/installation.txt b/docs/fix/getting-started-typos/01-get-started/installation.txt
index 908fdc3e94..228cd94e7d 100644
--- a/docs/fix/getting-started-typos/01-get-started/installation.txt
+++ b/docs/fix/getting-started-typos/01-get-started/installation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","01-get-started/installation","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","01-get-started/installation","c"],{"children":["__PAGE__?{\"slug\":[\"01-get-started\",\"installation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","01-get-started/installation","c"],{"children":["__PAGE__?{\"slug\":[\"01-get-started\",\"installation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -138,7 +138,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1405,7 +1405,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/01-get-started/stylesheet.html b/docs/fix/getting-started-typos/01-get-started/stylesheet.html
index 4922ce8422..4b8d89008d 100644
--- a/docs/fix/getting-started-typos/01-get-started/stylesheet.html
+++ b/docs/fix/getting-started-typos/01-get-started/stylesheet.html
@@ -24,7 +24,7 @@ <h2 class="flow--heading flow--heading--h2">Styles importieren</h2>
 <h2 class="flow--heading flow--heading--h2">Anwendung des Stylesheets</h2>
 <p>Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert
 sind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,
-Komponentenbasierten und leicht zu verstehendem Schema.</p>
+komponentenbasierten und leicht zu verstehendem Schema.</p>
 <hr class="customComponents_hr__JSHwn"/>
 <h3 class="flow--heading flow--heading--h3">Generelle Klassennamen-Auszeichnungen</h3>
 <p>Alle Klassennamen sind in Lowercase geschrieben und benutzen <code class="customComponents_code__kzJRU">-</code> um Wörter zu
@@ -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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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-get-started/stylesheet\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/01-get-started/stylesheet\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-get-started/stylesheet\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-get-started\\\",\\\"stylesheet\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18a:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Stylesheet\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L189\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-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/fix/getting-started-typos/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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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-get-started/stylesheet\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/01-get-started/stylesheet\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"01-get-started/stylesheet\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"01-get-started\\\",\\\"stylesheet\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18a:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Stylesheet\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L189\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/01-get-started/stylesheet.txt b/docs/fix/getting-started-typos/01-get-started/stylesheet.txt
index b612beb3a3..3e1a7882d1 100644
--- a/docs/fix/getting-started-typos/01-get-started/stylesheet.txt
+++ b/docs/fix/getting-started-typos/01-get-started/stylesheet.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","01-get-started/stylesheet","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","01-get-started/stylesheet","c"],{"children":["__PAGE__?{\"slug\":[\"01-get-started\",\"stylesheet\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","01-get-started/stylesheet","c"],{"children":["__PAGE__?{\"slug\":[\"01-get-started\",\"stylesheet\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","01-get-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -138,7 +138,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1405,7 +1405,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -2916,7 +2916,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.html b/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.html
index 0e1b87925e..dbe39f3696 100644
--- a/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.html
+++ b/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.html
@@ -69,4 +69,4 @@ <h3 class="flow--heading flow--heading--h3">Positiv formulieren</h3>
 getan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für
 die es keine direkte Lösung gibt, nicht immer möglich ist.</p>
 <div class="customComponents_doAndDont__HHh2C"><div class="customComponents_doAndDontText__j6VPG customComponents_dontText__rvfg7"><span>Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.</span></div><div class="customComponents_doAndDontContent__gmGzo customComponents_dont__tCjBL customComponents_withContent__pUetO"><h4 class="flow--heading flow--heading--h4">Don&#x27;t</h4></div><div class="customComponents_doAndDontText__j6VPG customComponents_doText__ut5v5"><span>Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte
-versuche es erneut.</span></div><div class="customComponents_doAndDontContent__gmGzo customComponents_do__QUSya customComponents_withContent__pUetO"><h4 class="flow--heading flow--heading--h4">Do</h4></div></div></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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-foundations/content-guidelines/fehlermeldungen\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/02-foundations/content-guidelines/fehlermeldungen\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-foundations/content-guidelines/fehlermeldungen\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-foundations\\\",\\\"content-guidelines\\\",\\\"fehlermeldungen\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-foundations/content-guidelines/fehlermeldungen\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18a:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Fehlermeldungen\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L189\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}}]]}]}],\"$undefined\"]\nb:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Fehlermeldungen\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
+versuche es erneut.</span></div><div class="customComponents_doAndDontContent__gmGzo customComponents_do__QUSya customComponents_withContent__pUetO"><h4 class="flow--heading flow--heading--h4">Do</h4></div></div></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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-foundations/content-guidelines/fehlermeldungen\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/02-foundations/content-guidelines/fehlermeldungen\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"02-foundations/content-guidelines/fehlermeldungen\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"02-foundations\\\",\\\"content-guidelines\\\",\\\"fehlermeldungen\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"02-foundations/content-guidelines/fehlermeldungen\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18a:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Fehlermeldungen\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L189\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18a\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}}]]}]}],\"$undefined\"]\nb:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Fehlermeldungen\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.txt b/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.txt
index a743a05ba0..cbd4beb0d0 100644
--- a/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.txt
+++ b/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","02-foundations/content-guidelines/fehlermeldungen","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","02-foundations/content-guidelines/fehlermeldungen","c"],{"children":["__PAGE__?{\"slug\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-foundations/content-guidelines/fehlermeldungen","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","02-foundations/content-guidelines/fehlermeldungen","c"],{"children":["__PAGE__?{\"slug\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","02-foundations/content-guidelines/fehlermeldungen","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -138,7 +138,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1405,7 +1405,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/actions/action-group.html b/docs/fix/getting-started-typos/03-components/actions/action-group.html
index 940696d5b7..326f7acba4 100644
--- a/docs/fix/getting-started-typos/03-components/actions/action-group.html
+++ b/docs/fix/getting-started-typos/03-components/actions/action-group.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>ActionGroup</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ActionGroup</h1>Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.7"><div class="flow--action-group--action-group-container"><div class="flow--action-group" role="group"><button type="button" class="flow--button flow--button--accent flow--button--solid flow--action-group--primary" data-rac="" slot="primary"><span class="flow--button--content"><span class="flow--button--text">Organisation erstellen</span></span></button><div class="flow--action-group--secondary"></div><button type="button" class="flow--button flow--button--secondary flow--button--soft flow--action-group--abort" data-rac="" slot="abort"><span class="flow--button--content"><span class="flow--button--text">Abbrechen</span></span></button></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/action-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/action-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/action-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"action-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/action-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T65c,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ActionGroup\"}],\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-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\":\"ActionGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ActionGroup</h1>Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.7"><div class="flow--action-group--action-group-container"><div class="flow--action-group" role="group"><button type="button" class="flow--button flow--button--accent flow--button--solid flow--action-group--primary" data-rac="" slot="primary"><span class="flow--button--content"><span class="flow--button--text">Organisation erstellen</span></span></button><div class="flow--action-group--secondary"></div><button type="button" class="flow--button flow--button--secondary flow--button--soft flow--action-group--abort" data-rac="" slot="abort"><span class="flow--button--content"><span class="flow--button--text">Abbrechen</span></span></button></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/action-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/action-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/action-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"action-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/action-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T65c,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ActionGroup\"}],\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-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\":\"ActionGroup\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/actions/action-group.txt b/docs/fix/getting-started-typos/03-components/actions/action-group.txt
index 04e17d1a84..41d1681ae8 100644
--- a/docs/fix/getting-started-typos/03-components/actions/action-group.txt
+++ b/docs/fix/getting-started-typos/03-components/actions/action-group.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/action-group","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/actions/action-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"action-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/action-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/actions/action-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"action-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/actions/action-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/actions/action.html b/docs/fix/getting-started-typos/03-components/actions/action.html
index 9b7e15735e..2bd3005ccd 100644
--- a/docs/fix/getting-started-typos/03-components/actions/action.html
+++ b/docs/fix/getting-started-typos/03-components/actions/action.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Action</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Action</h1>Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Speichern</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/action\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/action\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/action\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"action\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n190:T841,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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=\\\"actionConfirm\\\"\"\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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"191:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Action\"}],\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"confirmation\":\"$191\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Action</h1>Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Speichern</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/action\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/action\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/action\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"action\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n190:T841,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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=\\\"actionConfirm\\\"\"\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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"191:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Action\"}],\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"confirmation\":\"$191\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/actions/action.txt b/docs/fix/getting-started-typos/03-components/actions/action.txt
index b60e53a59a..a08ea0b432 100644
--- a/docs/fix/getting-started-typos/03-components/actions/action.txt
+++ b/docs/fix/getting-started-typos/03-components/actions/action.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/action","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/actions/action","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"action\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/actions/action","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"action\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/actions/button.html b/docs/fix/getting-started-typos/03-components/actions/button.html
index 6bb2fd33af..9400d68b3b 100644
--- a/docs/fix/getting-started-typos/03-components/actions/button.html
+++ b/docs/fix/getting-started-typos/03-components/actions/button.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Button</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Button</h1>Der Button dient zum Ausführen von Aktionen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" class="flow--button 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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:Tec7,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Button\"}],\"Der Button dient zum Ausführen von Aktionen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Button</h1>Der Button dient zum Ausführen von Aktionen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" class="flow--button 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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:Tec7,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Button\"}],\"Der Button dient zum Ausführen von Aktionen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/actions/button.txt b/docs/fix/getting-started-typos/03-components/actions/button.txt
index 6dd9791c7a..1b2c5deaaa 100644
--- a/docs/fix/getting-started-typos/03-components/actions/button.txt
+++ b/docs/fix/getting-started-typos/03-components/actions/button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/button","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/actions/button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/actions/button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/actions/context-menu.html b/docs/fix/getting-started-typos/03-components/actions/context-menu.html
index d0079241c1..db4c6f5836 100644
--- a/docs/fix/getting-started-typos/03-components/actions/context-menu.html
+++ b/docs/fix/getting-started-typos/03-components/actions/context-menu.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>ContextMenu</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ContextMenu</h1>Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-haspopup="true" aria-expanded="false" id="react-aria-:R6cvfaja:" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Trigger</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/context-menu\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/context-menu\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/context-menu\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"context-menu\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T71d,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Separator\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"separator\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ContextMenu\"}],\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ContextMenu</h1>Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-haspopup="true" aria-expanded="false" id="react-aria-:R6cvfaja:" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Trigger</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/context-menu\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/context-menu\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/context-menu\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"context-menu\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T71d,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Separator\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"separator\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ContextMenu\"}],\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/actions/context-menu.txt b/docs/fix/getting-started-typos/03-components/actions/context-menu.txt
index 3722b5e563..d51f7debc0 100644
--- a/docs/fix/getting-started-typos/03-components/actions/context-menu.txt
+++ b/docs/fix/getting-started-typos/03-components/actions/context-menu.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/context-menu","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/actions/context-menu","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"context-menu\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/actions/context-menu","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"context-menu\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/actions/copy-button.html b/docs/fix/getting-started-typos/03-components/actions/copy-button.html
index 3fce5ba3b3..cf53e68fb5 100644
--- a/docs/fix/getting-started-typos/03-components/actions/copy-button.html
+++ b/docs/fix/getting-started-typos/03-components/actions/copy-button.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>CopyButton</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CopyButton</h1>Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/copy-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/copy-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/copy-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"copy-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CopyButton\"}],\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CopyButton</h1>Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/actions/copy-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/actions/copy-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/actions/copy-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"actions\\\",\\\"copy-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CopyButton\"}],\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/actions/copy-button.txt b/docs/fix/getting-started-typos/03-components/actions/copy-button.txt
index aa2741f102..e9b935b47a 100644
--- a/docs/fix/getting-started-typos/03-components/actions/copy-button.txt
+++ b/docs/fix/getting-started-typos/03-components/actions/copy-button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/copy-button","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/actions/copy-button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"copy-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/actions/copy-button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"actions\",\"copy-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/avatar.html b/docs/fix/getting-started-typos/03-components/content/avatar.html
index 23bf24f04f..bede16d56c 100644
--- a/docs/fix/getting-started-typos/03-components/content/avatar.html
+++ b/docs/fix/getting-started-typos/03-components/content/avatar.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Avatar</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Avatar</h1>Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--avatar flow--avatar--size-m flow--avatar--variant-2"><div aria-label="Gillian Gopher" class="flow--initials flow--avatar--initials"><span>G</span><span>G</span></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/avatar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/avatar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/avatar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"avatar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:Tb4b,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Avatar\"}],\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Avatar</h1>Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--avatar flow--avatar--size-m flow--avatar--variant-2"><div aria-label="Gillian Gopher" class="flow--initials flow--avatar--initials"><span>G</span><span>G</span></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/avatar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/avatar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/avatar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"avatar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:Tb4b,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Avatar\"}],\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/avatar.txt b/docs/fix/getting-started-typos/03-components/content/avatar.txt
index 485c9af6b2..6a6993c4b8 100644
--- a/docs/fix/getting-started-typos/03-components/content/avatar.txt
+++ b/docs/fix/getting-started-typos/03-components/content/avatar.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/avatar","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/avatar","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"avatar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/avatar","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"avatar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/heading.html b/docs/fix/getting-started-typos/03-components/content/heading.html
index 4c1b95877b..cad6b8494d 100644
--- a/docs/fix/getting-started-typos/03-components/content/heading.html
+++ b/docs/fix/getting-started-typos/03-components/content/heading.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Heading</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Heading</h1>Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><h2 class="flow--heading flow--heading--h2">Das ist eine Überschrift</h2></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/heading\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/heading\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/heading\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"heading\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T92a,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Heading\"}],\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Heading</h1>Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><h2 class="flow--heading flow--heading--h2">Das ist eine Überschrift</h2></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/heading\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/heading\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/heading\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"heading\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T92a,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Heading\"}],\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/heading.txt b/docs/fix/getting-started-typos/03-components/content/heading.txt
index 3c81da1ccf..4ebf4f27a7 100644
--- a/docs/fix/getting-started-typos/03-components/content/heading.txt
+++ b/docs/fix/getting-started-typos/03-components/content/heading.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/heading","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/heading","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"heading\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/heading","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"heading\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/icon.html b/docs/fix/getting-started-typos/03-components/content/icon.html
index 093528b6d0..859a33f9fd 100644
--- a/docs/fix/getting-started-typos/03-components/content/icon.html
+++ b/docs/fix/getting-started-typos/03-components/content/icon.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Icon</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Icon</h1>Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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-home flow--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n190:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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,"18d: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,"191:Ta7a,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"192: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,"193: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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Icon\"}],\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"functional\":\"$18d\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":[[\"$\",\"$L190\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$191\",\"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\":\"$192\",\"functional\":\"$193\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Icon</h1>Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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-home flow--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n190:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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,"18d: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,"191:Ta7a,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"192: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,"193: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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Icon\"}],\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"functional\":\"$18d\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":[[\"$\",\"$L190\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$191\",\"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\":\"$192\",\"functional\":\"$193\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/icon.txt b/docs/fix/getting-started-typos/03-components/content/icon.txt
index 3496af9ffa..3ae10cbc28 100644
--- a/docs/fix/getting-started-typos/03-components/content/icon.txt
+++ b/docs/fix/getting-started-typos/03-components/content/icon.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/icon","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/icon","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/icon","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/illustrated-message.html b/docs/fix/getting-started-typos/03-components/content/illustrated-message.html
index 3b0fa0d4f8..91de99393d 100644
--- a/docs/fix/getting-started-typos/03-components/content/illustrated-message.html
+++ b/docs/fix/getting-started-typos/03-components/content/illustrated-message.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>IllustratedMessage</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">IllustratedMessage</h1>Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.7"><div class="flow--illustrated-message--illustrated-message-container"><div class="flow--illustrated-message"><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-app-window flow--icon flow--illustrated-message--icon flow--icon--size-l" focusable="false" role="img" aria-hidden="true"><path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path><path d="M6 8h.01"></path><path d="M9 8h.01"></path></svg><h2 class="flow--heading flow--heading--h2 flow--illustrated-message--heading">Keine Apps installiert</h2><span class="flow--illustrated-message--text">Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.</span><button type="button" class="flow--button flow--button--accent flow--button--solid flow--illustrated-message--button" data-rac=""><span class="flow--button--content"><span class="flow--button--text">App anlegen</span></span></button></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/illustrated-message\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/illustrated-message\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/illustrated-message\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"illustrated-message\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T4d8,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"IllustratedMessage\"}],\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">IllustratedMessage</h1>Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.7"><div class="flow--illustrated-message--illustrated-message-container"><div class="flow--illustrated-message"><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-app-window flow--icon flow--illustrated-message--icon flow--icon--size-l" focusable="false" role="img" aria-hidden="true"><path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path><path d="M6 8h.01"></path><path d="M9 8h.01"></path></svg><h2 class="flow--heading flow--heading--h2 flow--illustrated-message--heading">Keine Apps installiert</h2><span class="flow--illustrated-message--text">Lege deine erste App an, um mit der Arbeit an deiner Webseite loszulegen.</span><button type="button" class="flow--button flow--button--accent flow--button--solid flow--illustrated-message--button" data-rac=""><span class="flow--button--content"><span class="flow--button--text">App anlegen</span></span></button></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/illustrated-message\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/illustrated-message\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/illustrated-message\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"illustrated-message\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T4d8,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"IllustratedMessage\"}],\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/illustrated-message.txt b/docs/fix/getting-started-typos/03-components/content/illustrated-message.txt
index d2de573acd..c6a2c99478 100644
--- a/docs/fix/getting-started-typos/03-components/content/illustrated-message.txt
+++ b/docs/fix/getting-started-typos/03-components/content/illustrated-message.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/illustrated-message","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/illustrated-message","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"illustrated-message\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/illustrated-message","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"illustrated-message\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/image.html b/docs/fix/getting-started-typos/03-components/content/image.html
index fdcdce05c7..86f410bad8 100644
--- a/docs/fix/getting-started-typos/03-components/content/image.html
+++ b/docs/fix/getting-started-typos/03-components/content/image.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="preload" as="image" href="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Image</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Image</h1>Mit der Image-Komponente können Bilder angezeigt werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><img src="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544" alt="Gopher" width="200"/></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/image\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/image\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/image\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"image\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Image\"}],\"Mit der Image-Komponente können Bilder angezeigt werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Image</h1>Mit der Image-Komponente können Bilder angezeigt werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><img src="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544" alt="Gopher" width="200"/></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/image\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/image\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/image\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"image\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Image\"}],\"Mit der Image-Komponente können Bilder angezeigt werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/image.txt b/docs/fix/getting-started-typos/03-components/content/image.txt
index 6b49b520c3..760eb06b68 100644
--- a/docs/fix/getting-started-typos/03-components/content/image.txt
+++ b/docs/fix/getting-started-typos/03-components/content/image.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/image","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/image","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"image\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/image","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"image\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/inline-code.html b/docs/fix/getting-started-typos/03-components/content/inline-code.html
index 142071a97d..68e7b718f8 100644
--- a/docs/fix/getting-started-typos/03-components/content/inline-code.html
+++ b/docs/fix/getting-started-typos/03-components/content/inline-code.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>InlineCode</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">InlineCode</h1>InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><span>Gib <code class="flow--inline-code">yarn start</code> ein um deine App zu starten.</span></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/inline-code\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/inline-code\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/inline-code\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"inline-code\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"InlineCode\"}],\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">InlineCode</h1>InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><span>Gib <code class="flow--inline-code">yarn start</code> ein um deine App zu starten.</span></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/inline-code\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/inline-code\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/inline-code\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"inline-code\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"InlineCode\"}],\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/inline-code.txt b/docs/fix/getting-started-typos/03-components/content/inline-code.txt
index db7b5d19d5..3697e783bd 100644
--- a/docs/fix/getting-started-typos/03-components/content/inline-code.txt
+++ b/docs/fix/getting-started-typos/03-components/content/inline-code.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/inline-code","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/inline-code","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"inline-code\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/inline-code","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"inline-code\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/label.html b/docs/fix/getting-started-typos/03-components/content/label.html
index 7e19575eba..314dfc5de5 100644
--- a/docs/fix/getting-started-typos/03-components/content/label.html
+++ b/docs/fix/getting-started-typos/03-components/content/label.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Label</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Label</h1>Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--label">Das ist ein Label</label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/label\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/label\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/label\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"label\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Label\"}],\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Label</h1>Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--label">Das ist ein Label</label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/label\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/label\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/label\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"label\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Label\"}],\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/label.txt b/docs/fix/getting-started-typos/03-components/content/label.txt
index 5330f5fa6c..5fc9437db4 100644
--- a/docs/fix/getting-started-typos/03-components/content/label.txt
+++ b/docs/fix/getting-started-typos/03-components/content/label.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/label","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/label","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/label","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/labeled-value.html b/docs/fix/getting-started-typos/03-components/content/labeled-value.html
index 4c332d9b57..f4914b37b9 100644
--- a/docs/fix/getting-started-typos/03-components/content/labeled-value.html
+++ b/docs/fix/getting-started-typos/03-components/content/labeled-value.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>LabeledValue</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">LabeledValue</h1>Ein LabeledValue zeigt eine Information mit einem Label an.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--labeled-value"><label class="flow--label flow--labeled-value--label">Speicherplatz</label><div>20 GB</div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/labeled-value\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/labeled-value\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/labeled-value\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"labeled-value\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T655,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"LabeledValue\"}],\"Ein LabeledValue zeigt eine Information mit einem Label an.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">LabeledValue</h1>Ein LabeledValue zeigt eine Information mit einem Label an.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--labeled-value"><label class="flow--label flow--labeled-value--label">Speicherplatz</label><div>20 GB</div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/labeled-value\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/labeled-value\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/labeled-value\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"labeled-value\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T655,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"LabeledValue\"}],\"Ein LabeledValue zeigt eine Information mit einem Label an.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/labeled-value.txt b/docs/fix/getting-started-typos/03-components/content/labeled-value.txt
index 5bd21af51d..6e6775e6bb 100644
--- a/docs/fix/getting-started-typos/03-components/content/labeled-value.txt
+++ b/docs/fix/getting-started-typos/03-components/content/labeled-value.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/labeled-value","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/labeled-value","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"labeled-value\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/labeled-value","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"labeled-value\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/skeleton.html b/docs/fix/getting-started-typos/03-components/content/skeleton.html
index c2ca632139..b522b16dd8 100644
--- a/docs/fix/getting-started-typos/03-components/content/skeleton.html
+++ b/docs/fix/getting-started-typos/03-components/content/skeleton.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Skeleton</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Skeleton</h1>Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--skeleton" aria-hidden="true"></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/skeleton\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/skeleton\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/skeleton\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"skeleton\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T941,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Skeleton\"}],\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Skeleton</h1>Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--skeleton" aria-hidden="true"></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/skeleton\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/skeleton\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/skeleton\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"skeleton\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T941,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Skeleton\"}],\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/skeleton.txt b/docs/fix/getting-started-typos/03-components/content/skeleton.txt
index 03a29c5cb0..c7a5d2ca09 100644
--- a/docs/fix/getting-started-typos/03-components/content/skeleton.txt
+++ b/docs/fix/getting-started-typos/03-components/content/skeleton.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/skeleton","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/skeleton","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"skeleton\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/skeleton","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"skeleton\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/content/text.html b/docs/fix/getting-started-typos/03-components/content/text.html
index 7ebb6c9da4..0e496c6d96 100644
--- a/docs/fix/getting-started-typos/03-components/content/text.html
+++ b/docs/fix/getting-started-typos/03-components/content/text.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Text</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Text</h1>Die Text-Komponente wird verwendet, um Texte zu gruppieren.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><span>Das ist ein Text</span></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/text\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/text\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/text\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"text\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T70c,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Text\"}],\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Text</h1>Die Text-Komponente wird verwendet, um Texte zu gruppieren.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><span>Das ist ein Text</span></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/content/text\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/content/text\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/content/text\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"content\\\",\\\"text\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T70c,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Text\"}],\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/content/text.txt b/docs/fix/getting-started-typos/03-components/content/text.txt
index 3a789a6d29..d5da7298f6 100644
--- a/docs/fix/getting-started-typos/03-components/content/text.txt
+++ b/docs/fix/getting-started-typos/03-components/content/text.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/text","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/content/text","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"text\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/content/text","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"content\",\"text\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.html b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.html
index 101fe71396..afebebee21 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>CheckboxButton</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CheckboxButton</h1>Der CheckboxButton verhält sich wie eine Checkbox.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--checkbox flow--checkbox-button" data-rac=""><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 type="checkbox"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Ich stimme den AGBs zu und bestätige, dass ich die Datenschutzhinweise zur Kenntnis genommen habe.</label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/checkbox-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/checkbox-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/checkbox-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"checkbox-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CheckboxButton\"}],\"Der CheckboxButton verhält sich wie eine Checkbox.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CheckboxButton</h1>Der CheckboxButton verhält sich wie eine Checkbox.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--checkbox flow--checkbox-button" data-rac=""><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 type="checkbox"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Ich stimme den AGBs zu und bestätige, dass ich die Datenschutzhinweise zur Kenntnis genommen habe.</label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/checkbox-button\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/checkbox-button\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/checkbox-button\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"checkbox-button\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CheckboxButton\"}],\"Der CheckboxButton verhält sich wie eine Checkbox.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.txt b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.txt
index b9ab8188f7..a57b54c384 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/checkbox-button","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/checkbox-button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/checkbox-button","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox-button\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.html b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.html
index 3611a2e19c..140ab93f98 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>CheckboxGroup</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CheckboxGroup</h1>Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div role="group" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--form-field" data-rac=""><span class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:">Berechtigungen</span><div class="flow--checkbox-group"><label class="flow--checkbox" data-rac=""><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 type="checkbox" aria-describedby="react-aria-:R6cvfajaH3:" value="read"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Lesen</label><label class="flow--checkbox" data-rac=""><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 type="checkbox" aria-describedby="react-aria-:R6cvfajaH3:" value="write"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Schreiben</label></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/checkbox-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/checkbox-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/checkbox-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"checkbox-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T6de,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CheckboxGroup\"}],\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CheckboxGroup</h1>Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div role="group" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--form-field" data-rac=""><span class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:">Berechtigungen</span><div class="flow--checkbox-group"><label class="flow--checkbox" data-rac=""><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 type="checkbox" aria-describedby="react-aria-:R6cvfajaH3:" value="read"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Lesen</label><label class="flow--checkbox" data-rac=""><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 type="checkbox" aria-describedby="react-aria-:R6cvfajaH3:" value="write"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Schreiben</label></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/checkbox-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/checkbox-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/checkbox-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"checkbox-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T6de,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CheckboxGroup\"}],\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.txt b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.txt
index 771da124b0..936e95c507 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/checkbox-group","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/checkbox-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/checkbox-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/checkbox.html b/docs/fix/getting-started-typos/03-components/form-controls/checkbox.html
index 129fc91dbc..f1aef558b8 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/checkbox.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/checkbox.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Checkbox</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Checkbox</h1>Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--checkbox" data-rac=""><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 type="checkbox"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Ich stimme den AGBs zu und bestätige, dass ich die Datenschutzhinweise zur Kenntnis genommen habe.</label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/checkbox\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/checkbox\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/checkbox\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"checkbox\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T597,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Checkbox\"}],\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Checkbox</h1>Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--checkbox" data-rac=""><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 type="checkbox"/></span><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-square flow--icon flow--checkbox--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path></svg>Ich stimme den AGBs zu und bestätige, dass ich die Datenschutzhinweise zur Kenntnis genommen habe.</label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/checkbox\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/checkbox\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/checkbox\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"checkbox\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T597,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Checkbox\"}],\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/checkbox.txt b/docs/fix/getting-started-typos/03-components/form-controls/checkbox.txt
index 4f393f47d0..03f7550852 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/checkbox.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/checkbox.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/checkbox","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/checkbox","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/checkbox","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"checkbox\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.html b/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.html
index 6089b3df01..32b959c317 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Field (React Hook Form)</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Field (React Hook Form)</h1>Die Field Komponente &quot;verbindet&quot; Flow Eingabefelder mit React Hook Form.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Field/Field.tsx">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><form><div class="flow--form-field" data-rac="" data-required="true"><input type="text" aria-required="true" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--text-field" data-rac="" name="name" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:" for="react-aria-:R6cvfaja:">Name</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH3:" slot="description">The name of the project</span></div></form></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/field-react-hook-form\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/field-react-hook-form\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/field-react-hook-form\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"field-react-hook-form\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/field-react-hook-form\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T785,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(_components.p, {\n      children: [\"Die Field Komponente verwendet die gleichen Properties (ausschließlich \", _jsx(_components.code, {\n        children: \"render\"\n      }), \")\\nwie die\\n\", _jsx(_components.a, {\n        href: \"https://www.react-hook-form.com/api/usecontroller/controller/\",\n        children: \"Controller Komponente\"\n      }), \"\\nvon React Hook Form.\"]\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Typed Field\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die \", _jsx(_components.code, {\n        children: \"typedField(form)\"\n      }), \" Factory erzeugt eine auf den Type der jeweilige Form\\nangepasste Field Komponente. So führen z.B. unbekannte Feld-Namen zu einem\\nTypeScript-Fehler.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"typed-field\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Field (React Hook Form)\"}],\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Field/Field.tsx\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/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\":\"Field (React Hook Form)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Field (React Hook Form)</h1>Die Field Komponente &quot;verbindet&quot; Flow Eingabefelder mit React Hook Form.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Field/Field.tsx">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><form><div class="flow--form-field" data-rac="" data-required="true"><input type="text" aria-required="true" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--text-field" data-rac="" name="name" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:" for="react-aria-:R6cvfaja:">Name</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH3:" slot="description">The name of the project</span></div></form></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/field-react-hook-form\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/field-react-hook-form\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/field-react-hook-form\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"field-react-hook-form\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/field-react-hook-form\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T785,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsxs(_components.p, {\n      children: [\"Die Field Komponente verwendet die gleichen Properties (ausschließlich \", _jsx(_components.code, {\n        children: \"render\"\n      }), \")\\nwie die\\n\", _jsx(_components.a, {\n        href: \"https://www.react-hook-form.com/api/usecontroller/controller/\",\n        children: \"Controller Komponente\"\n      }), \"\\nvon React Hook Form.\"]\n    }), \"\\n\", _jsx(_components.h2, {\n      children: \"Beispiel\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Typed Field\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die \", _jsx(_components.code, {\n        children: \"typedField(form)\"\n      }), \" Factory erzeugt eine auf den Type der jeweilige Form\\nangepasste Field Komponente. So führen z.B. unbekannte Feld-Namen zu einem\\nTypeScript-Fehler.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"typed-field\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Field (React Hook Form)\"}],\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Field/Field.tsx\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/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\":\"Field (React Hook Form)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.txt b/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.txt
index d41574c276..37967c80ea 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/field-react-hook-form","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/field-react-hook-form","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/field-react-hook-form","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/field-react-hook-form","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/field-react-hook-form","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.html b/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.html
index 3e5525fdf0..f10e9d72c7 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Form (React Hook Form)</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Form (React Hook Form)</h1>Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Form/Form.tsx">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><form><section class="flow--section"><div class="flow--form-field" data-rac="" data-required="true"><input type="text" aria-required="true" id="react-aria-:R16cvfaja:" aria-labelledby="react-aria-:R16cvfajaH1:" aria-describedby="react-aria-:R16cvfajaH3: react-aria-:R16cvfajaH4:" class="flow--text-field" data-rac="" name="name" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R16cvfajaH1:" for="react-aria-:R16cvfaja:">Name</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R16cvfajaH3:" slot="description">The name of the project</span></div><div class="flow--action-group--action-group-container"><div class="flow--action-group" role="group"><button type="submit" class="flow--button flow--button--primary flow--button--solid flow--action-group--primary" data-rac="" slot="primary"><span class="flow--button--content"><span class="flow--button--text">Save</span></span></button><div class="flow--action-group--secondary"></div></div></div></section></form></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/form-react-hook-form\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/form-react-hook-form\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/form-react-hook-form\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"form-react-hook-form\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/form-react-hook-form\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n190:T433,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_c"])</script><script>self.__next_f.push([1,"reateMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Form (React Hook Form)\"}],\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Form/Form.tsx\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$18c\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$191\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/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\":\"Form (React Hook Form)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Form (React Hook Form)</h1>Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Form/Form.tsx">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><form><section class="flow--section"><div class="flow--form-field" data-rac="" data-required="true"><input type="text" aria-required="true" id="react-aria-:R16cvfaja:" aria-labelledby="react-aria-:R16cvfajaH1:" aria-describedby="react-aria-:R16cvfajaH3: react-aria-:R16cvfajaH4:" class="flow--text-field" data-rac="" name="name" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R16cvfajaH1:" for="react-aria-:R16cvfaja:">Name</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R16cvfajaH3:" slot="description">The name of the project</span></div><div class="flow--action-group--action-group-container"><div class="flow--action-group" role="group"><button type="submit" class="flow--button flow--button--primary flow--button--solid flow--action-group--primary" data-rac="" slot="primary"><span class="flow--button--content"><span class="flow--button--text">Save</span></span></button><div class="flow--action-group--secondary"></div></div></div></section></form></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/form-react-hook-form\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/form-react-hook-form\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/form-react-hook-form\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"form-react-hook-form\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/form-react-hook-form\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n190:T433,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_c"])</script><script>self.__next_f.push([1,"reateMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Form (React Hook Form)\"}],\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/integrations/react-hook-form/components/Form/Form.tsx\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$18c\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$191\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/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\":\"Form (React Hook Form)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.txt b/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.txt
index 3ec64f4a82..1017a416d1 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/form-react-hook-form","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/form-react-hook-form","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/form-react-hook-form","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/form-react-hook-form","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/form-react-hook-form","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/number-field.html b/docs/fix/getting-started-typos/03-components/form-controls/number-field.html
index 49e93ecbea..809ffdb018 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/number-field.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/number-field.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>NumberField</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">NumberField</h1>Das NumberField dient der Eingabe von Zahlen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--form-field" data-rac=""><div role="group" class="flow--number-field--group" data-rac=""><button id="react-aria-:R6cvfajaH7:" type="button" tabindex="-1" aria-label="Decrease" aria-labelledby="react-aria-:R6cvfajaH7: react-aria-:R6cvfajaH2:" aria-controls="react-aria-:R6cvfaja:" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain flow--number-field--decrement-button" data-rac="" slot="decrement"><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-chevron-down flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg><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-minus flow--icon flow--button--icon flow--number-field--coarse-pointer-icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M5 12l14 0"></path></svg></span></button><input aria-labelledby="react-aria-:R6cvfajaH2:" id="react-aria-:R6cvfaja:" type="text" autoComplete="off" inputMode="numeric" aria-describedby="react-aria-:R6cvfajaH4: react-aria-:R6cvfajaH5:" aria-roledescription="Number field" autoCorrect="off" spellCheck="false" class="flow--number-field--input" data-rac="" value=""/><button id="react-aria-:R6cvfajaH6:" type="button" tabindex="-1" aria-label="Increase" aria-labelledby="react-aria-:R6cvfajaH6: react-aria-:R6cvfajaH2:" aria-controls="react-aria-:R6cvfaja:" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain flow--number-field--increment-button" data-rac="" slot="increment"><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-chevron-up flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M6 15l6 -6l6 6"></path></svg><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-plus flow--icon flow--button--icon flow--number-field--coarse-pointer-icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH2:" for="react-aria-:R6cvfaja:">Alter<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH4:" slot="description">Gib dein Alter ein</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/number-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/number-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/number-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"number-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T700,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"NumberField\"}],\"Das NumberField dient der Eingabe von Zahlen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">NumberField</h1>Das NumberField dient der Eingabe von Zahlen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--form-field" data-rac=""><div role="group" class="flow--number-field--group" data-rac=""><button id="react-aria-:R6cvfajaH7:" type="button" tabindex="-1" aria-label="Decrease" aria-labelledby="react-aria-:R6cvfajaH7: react-aria-:R6cvfajaH2:" aria-controls="react-aria-:R6cvfaja:" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain flow--number-field--decrement-button" data-rac="" slot="decrement"><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-chevron-down flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg><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-minus flow--icon flow--button--icon flow--number-field--coarse-pointer-icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M5 12l14 0"></path></svg></span></button><input aria-labelledby="react-aria-:R6cvfajaH2:" id="react-aria-:R6cvfaja:" type="text" autoComplete="off" inputMode="numeric" aria-describedby="react-aria-:R6cvfajaH4: react-aria-:R6cvfajaH5:" aria-roledescription="Number field" autoCorrect="off" spellCheck="false" class="flow--number-field--input" data-rac="" value=""/><button id="react-aria-:R6cvfajaH6:" type="button" tabindex="-1" aria-label="Increase" aria-labelledby="react-aria-:R6cvfajaH6: react-aria-:R6cvfajaH2:" aria-controls="react-aria-:R6cvfaja:" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain flow--number-field--increment-button" data-rac="" slot="increment"><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-chevron-up flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M6 15l6 -6l6 6"></path></svg><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-plus flow--icon flow--button--icon flow--number-field--coarse-pointer-icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH2:" for="react-aria-:R6cvfaja:">Alter<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH4:" slot="description">Gib dein Alter ein</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/number-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/number-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/number-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"number-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T700,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"NumberField\"}],\"Das NumberField dient der Eingabe von Zahlen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/number-field.txt b/docs/fix/getting-started-typos/03-components/form-controls/number-field.txt
index 0d5d35e51e..ca96189c66 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/number-field.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/number-field.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/number-field","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/number-field","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"number-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/number-field","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"number-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/radio-group.html b/docs/fix/getting-started-typos/03-components/form-controls/radio-group.html
index b7b44f0754..2e0bc98ff2 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/radio-group.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/radio-group.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>RadioGroup</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">RadioGroup</h1>Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div role="radiogroup" aria-orientation="vertical" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--form-field" data-rac="" data-orientation="vertical"><span class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:">Rolle</span><div class="flow--radio-group"><label class="flow--radio-group--radio" data-rac="" data-selected="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 tabindex="0" type="radio" aria-describedby="react-aria-:R6cvfajaH3:" name="react-aria-:R6cvfajaH5:" checked="" value="admin"/></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-circle-dot-filled flow--icon flow--radio-group--radio--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 6.66a2 2 0 0 0 -1.977 1.697l-.018 .154l-.005 .149l.005 .15a2 2 0 1 0 1.995 -2.15z"></path></svg>Administrator</label><label class="flow--radio-group--radio" data-rac=""><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 tabindex="-1" type="radio" aria-describedby="react-aria-:R6cvfajaH3:" name="react-aria-:R6cvfajaH5:" value="member"/></span><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-circle flow--icon flow--radio-group--radio--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>Mitglied</label><label class="flow--radio-group--radio" data-rac=""><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 tabindex="-1" type="radio" aria-describedby="react-aria-:R6cvfajaH3:" name="react-aria-:R6cvfajaH5:" value="accountant"/></span><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-circle flow--icon flow--radio-group--radio--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>Buchhalter</label></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/radio-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/radio-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/radio-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"radio-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T858,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"RadioGroup\"}],\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">RadioGroup</h1>Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div role="radiogroup" aria-orientation="vertical" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--form-field" data-rac="" data-orientation="vertical"><span class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:">Rolle</span><div class="flow--radio-group"><label class="flow--radio-group--radio" data-rac="" data-selected="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 tabindex="0" type="radio" aria-describedby="react-aria-:R6cvfajaH3:" name="react-aria-:R6cvfajaH5:" checked="" value="admin"/></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-circle-dot-filled flow--icon flow--radio-group--radio--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 6.66a2 2 0 0 0 -1.977 1.697l-.018 .154l-.005 .149l.005 .15a2 2 0 1 0 1.995 -2.15z"></path></svg>Administrator</label><label class="flow--radio-group--radio" data-rac=""><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 tabindex="-1" type="radio" aria-describedby="react-aria-:R6cvfajaH3:" name="react-aria-:R6cvfajaH5:" value="member"/></span><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-circle flow--icon flow--radio-group--radio--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>Mitglied</label><label class="flow--radio-group--radio" data-rac=""><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 tabindex="-1" type="radio" aria-describedby="react-aria-:R6cvfajaH3:" name="react-aria-:R6cvfajaH5:" value="accountant"/></span><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-circle flow--icon flow--radio-group--radio--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>Buchhalter</label></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/radio-group\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/radio-group\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/radio-group\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"radio-group\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T858,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"RadioGroup\"}],\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/radio-group.txt b/docs/fix/getting-started-typos/03-components/form-controls/radio-group.txt
index acb44487ff..9dacfc9d62 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/radio-group.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/radio-group.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/radio-group","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/radio-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"radio-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/radio-group","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"radio-group\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/select.html b/docs/fix/getting-started-typos/03-components/form-controls/select.html
index 9dfd13793d..95aa49f697 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/select.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/select.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Select</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Select</h1>Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><template data-react-aria-hidden="true"><section aria-labelledby="react-aria-:R4r6cvfaja:" role="dialog" tabindex="-1" class="flow--popover--content"></section></template><div class="flow--select flow--form-field" data-rac=""><button id="react-aria-:R6cvfajaH2:" type="button" aria-labelledby="react-aria-:R6cvfajaH7: react-aria-:R6cvfajaH3:" aria-describedby="react-aria-:R6cvfajaH5: react-aria-:R6cvfajaH6:" aria-haspopup="listbox" aria-expanded="false" class="flow--select--toggle" data-rac=""><span id="react-aria-:R6cvfajaH7:" class="react-aria-SelectValue" data-rac="" data-placeholder="true">Select an item</span><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-chevron-down flow--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M6 9l6 6l6 -6"></path></svg></button><span class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH3:">App<!-- --> (optional)</span></div><div 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" aria-hidden="true" data-react-aria-prevent-focus="true" data-a11y-ignore="aria-hidden-focus" data-testid="hidden-select-container"><input type="text" tabindex="-1" style="font-size:16px"/><label><select tabindex="-1"><option selected=""></option><option value="react-aria-1">WordPress</option><option value="react-aria-2">TYPO3</option><option value="react-aria-3">Contao</option><option value="react-aria-4">Drupal</option><option value="react-aria-5">Joomla!</option><option value="react-aria-6">Matomo</option></select></label></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/select\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/select\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/select\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"select\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Select\"}],\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Select</h1>Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><template data-react-aria-hidden="true"><section aria-labelledby="react-aria-:R4r6cvfaja:" role="dialog" tabindex="-1" class="flow--popover--content"></section></template><div class="flow--select flow--form-field" data-rac=""><button id="react-aria-:R6cvfajaH2:" type="button" aria-labelledby="react-aria-:R6cvfajaH7: react-aria-:R6cvfajaH3:" aria-describedby="react-aria-:R6cvfajaH5: react-aria-:R6cvfajaH6:" aria-haspopup="listbox" aria-expanded="false" class="flow--select--toggle" data-rac=""><span id="react-aria-:R6cvfajaH7:" class="react-aria-SelectValue" data-rac="" data-placeholder="true">Select an item</span><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-chevron-down flow--icon flow--icon--size-m" focusable="false" role="img" aria-hidden="true"><path d="M6 9l6 6l6 -6"></path></svg></button><span class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH3:">App<!-- --> (optional)</span></div><div 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" aria-hidden="true" data-react-aria-prevent-focus="true" data-a11y-ignore="aria-hidden-focus" data-testid="hidden-select-container"><input type="text" tabindex="-1" style="font-size:16px"/><label><select tabindex="-1"><option selected=""></option><option value="react-aria-1">WordPress</option><option value="react-aria-2">TYPO3</option><option value="react-aria-3">Contao</option><option value="react-aria-4">Drupal</option><option value="react-aria-5">Joomla!</option><option value="react-aria-6">Matomo</option></select></label></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/select\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/select\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/select\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"select\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Select\"}],\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/select.txt b/docs/fix/getting-started-typos/03-components/form-controls/select.txt
index 922ae2982d..05118cf53e 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/select.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/select.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/select","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/select","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"select\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/select","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"select\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/slider.html b/docs/fix/getting-started-typos/03-components/form-controls/slider.html
index 08cec66108..52c74eb747 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/slider.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/slider.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Slider</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Slider</h1>Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div role="group" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" class="flow--slider" data-rac="" data-orientation="horizontal"><div class="flow--slider--text"><output for="react-aria-:R6cvfajaH1:-0" aria-live="off" class="flow--slider--value" data-rac="" data-orientation="horizontal">200 GB</output><label id="react-aria-:R6cvfajaH1:">Storage</label></div><div style="position:relative;touch-action:none" class="flow--slider--track" data-rac="" data-orientation="horizontal"><button type="button" aria-label="Decrement value" class="flow--button flow--button--size-s flow--button--primary flow--button--plain flow--slider--decrement" 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-minus flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M5 12l14 0"></path></svg></span></button><button type="button" aria-label="Increment value" class="flow--button flow--button--size-s flow--button--primary flow--button--plain flow--slider--increment" 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-plus flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button><div class="flow--slider--fill" style="width:9.090909090909092%"></div><div class="flow--slider--initial-marker" style="left:calc(9.090909090909092% - 2px)"></div><div style="position:absolute;left:9.090909090909092%;transform:translate(-50%, -50%);touch-action:none" class="flow--slider--thumb" data-rac=""><div 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 tabindex="0" id="react-aria-:R6cvfajaH1:-0" aria-labelledby="react-aria-:R1d6cvfajaH1: react-aria-:R6cvfajaH1:" type="range" min="20" max="2000" step="20" aria-orientation="horizontal" aria-valuetext="200 GB" aria-describedby="" aria-details="" value="200"/></div></div></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/slider\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/slider\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/slider\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"slider\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/slider\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T66a,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: [\"Dem Slider kann optional ein Min-, Max- und Default-Wert, sowie die Step-Größe\\nmitgegeben werden. Der Default-Wert kann über das Property \", _jsx(_components.code, {\n        children: \"showInitialMarker\"\n      }), \"\\nauf dem Slider markiert werden. Außerdem werden diverse Formate und Einheiten\\nunterstützt (s.\\n\", _jsx(_components.a, {\n        href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\",\n        children: \"Intel.NumberFormat\"\n      }), \"\\n)\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Slider\"}],\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/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\":\"Slider\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Slider</h1>Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div role="group" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" class="flow--slider" data-rac="" data-orientation="horizontal"><div class="flow--slider--text"><output for="react-aria-:R6cvfajaH1:-0" aria-live="off" class="flow--slider--value" data-rac="" data-orientation="horizontal">200 GB</output><label id="react-aria-:R6cvfajaH1:">Storage</label></div><div style="position:relative;touch-action:none" class="flow--slider--track" data-rac="" data-orientation="horizontal"><button type="button" aria-label="Decrement value" class="flow--button flow--button--size-s flow--button--primary flow--button--plain flow--slider--decrement" 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-minus flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M5 12l14 0"></path></svg></span></button><button type="button" aria-label="Increment value" class="flow--button flow--button--size-s flow--button--primary flow--button--plain flow--slider--increment" 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-plus flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button><div class="flow--slider--fill" style="width:9.090909090909092%"></div><div class="flow--slider--initial-marker" style="left:calc(9.090909090909092% - 2px)"></div><div style="position:absolute;left:9.090909090909092%;transform:translate(-50%, -50%);touch-action:none" class="flow--slider--thumb" data-rac=""><div 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 tabindex="0" id="react-aria-:R6cvfajaH1:-0" aria-labelledby="react-aria-:R1d6cvfajaH1: react-aria-:R6cvfajaH1:" type="range" min="20" max="2000" step="20" aria-orientation="horizontal" aria-valuetext="200 GB" aria-describedby="" aria-details="" value="200"/></div></div></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/slider\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/slider\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/slider\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"slider\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/slider\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T66a,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: [\"Dem Slider kann optional ein Min-, Max- und Default-Wert, sowie die Step-Größe\\nmitgegeben werden. Der Default-Wert kann über das Property \", _jsx(_components.code, {\n        children: \"showInitialMarker\"\n      }), \"\\nauf dem Slider markiert werden. Außerdem werden diverse Formate und Einheiten\\nunterstützt (s.\\n\", _jsx(_components.a, {\n        href: \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\",\n        children: \"Intel.NumberFormat\"\n      }), \"\\n)\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {})]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Slider\"}],\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/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\":\"Slider\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/slider.txt b/docs/fix/getting-started-typos/03-components/form-controls/slider.txt
index 47ea1c0aa0..61785834f0 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/slider.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/slider.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/slider","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/slider","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"slider\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/slider","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/slider","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"slider\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/form-controls/slider","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/switch.html b/docs/fix/getting-started-typos/03-components/form-controls/switch.html
index a5a2994ac5..0631e84ab0 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/switch.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/switch.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Switch</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Switch</h1>Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--switch" data-rac="" data-selected="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 type="checkbox" role="switch" checked=""/></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-check flow--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M5 12l5 5l10 -10"></path></svg></div></div><label class="flow--label flow--switch--label">Autoresponder</label></label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/switch\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/switch\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/switch\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"switch\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T597,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Switch\"}],\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Switch</h1>Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><label class="flow--switch" data-rac="" data-selected="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 type="checkbox" role="switch" checked=""/></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-check flow--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M5 12l5 5l10 -10"></path></svg></div></div><label class="flow--label flow--switch--label">Autoresponder</label></label></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/switch\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/switch\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/switch\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"switch\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T597,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Switch\"}],\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/switch.txt b/docs/fix/getting-started-typos/03-components/form-controls/switch.txt
index 226743735e..1d7e861ce0 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/switch.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/switch.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/switch","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/switch","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"switch\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/switch","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"switch\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/text-area.html b/docs/fix/getting-started-typos/03-components/form-controls/text-area.html
index ec0bd91a6d..7fab1440a3 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/text-area.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/text-area.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>TextArea</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">TextArea</h1>Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--form-field" data-rac=""><textarea type="text" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" rows="5" class="flow--text-area" data-rac=""></textarea><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:" for="react-aria-:R6cvfaja:">Public Key<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH3:" slot="description">Beginnt mit ssh-rsa</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/text-area\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/text-area\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/text-area\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"text-area\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T84c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Character Count\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über das \", _jsx(_components.code, {\n        children: \"showCharacterCount\"\n      }), \" Property wird eine FieldDescription hinzugefügt,\\ndie aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl\\nanzeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"characterCount\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"TextArea\"}],\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">TextArea</h1>Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--form-field" data-rac=""><textarea type="text" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" rows="5" class="flow--text-area" data-rac=""></textarea><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:" for="react-aria-:R6cvfaja:">Public Key<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH3:" slot="description">Beginnt mit ssh-rsa</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/text-area\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/text-area\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/text-area\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"text-area\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T84c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Character Count\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über das \", _jsx(_components.code, {\n        children: \"showCharacterCount\"\n      }), \" Property wird eine FieldDescription hinzugefügt,\\ndie aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl\\nanzeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"characterCount\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"TextArea\"}],\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/text-area.txt b/docs/fix/getting-started-typos/03-components/form-controls/text-area.txt
index 21f6931e16..0fc818fa5c 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/text-area.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/text-area.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/text-area","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/text-area","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"text-area\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/text-area","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"text-area\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/text-field.html b/docs/fix/getting-started-typos/03-components/form-controls/text-field.html
index 89924c3829..0158530fd1 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/text-field.html
+++ b/docs/fix/getting-started-typos/03-components/form-controls/text-field.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>TextField</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">TextField</h1>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.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:" for="react-aria-:R6cvfaja:">URL<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH3:" slot="description">Beginnt mit https://</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/text-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/text-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/text-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"text-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T137f,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Playground\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Verwende \", _jsx(_components.code, {\n        children: \"\u003cTextField /\u003e\"\n      }), \", um ein TextField anzuzeigen. Integriere immer ein\\n\", _jsx(_components.code, {\n        children: \"\u003cLabel /\u003e\"\n      }), \", um Informationen zu vermitteln, die für das Verständnis der\\nEingabeanforderungen unerlässlich sind. Optional können zusätzliche\\nInformationen (z.B. Formatierungshinweise) über die \", _jsx(_components.code, {\n        children: \"\u003cFieldDescription /\u003e\"\n      }), \"\\nergänzt werden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn das TextField disabled ist, kann nicht mit ihm interagiert werden. Sobald\\ndie Ursache für die Deaktivierung behoben ist, kann das TextField wieder normal\\nverwendet werden.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Validierung\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um das textField zu validieren, stehen folgende Properties zur Verfügung:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.code, {\n          children: \"isRequired\"\n        }), \" für Pflichtfelder.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.code, {\n          children: \"validate\"\n        }), \" für eigene Validierungen.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"HTML Input Properties wie \", _jsx(_components.code, {\n          children: \"type=”email”\"\n        }), \", \", _jsx(_components.code, {\n          children: \"minLength\"\n        }), \".\"]\n      }), \"\\n\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Wenn die Benutzereingabe nicht den Anforderungen entspricht, wird das TextField\\ninvalidiert. Mittels \", _jsx(_components.code, {\n        children: \"\u003cFieldError /\u003e\"\n      }), \" kann eine Fehlermeldung angezeigt werden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Value\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Standardmäßig ist der Value eines TextFields leer. Es ist möglich dem TextField\\neine uncontrolled \", _jsx(_components.code, {\n        children: \"defaultValue\"\n      }), \" mitzugeben. Es kann auch ein controlled \", _jsx(_components.code, {\n        children: \"value\"\n      }), \"\\nfür das TextField gesetzt werden, um dieses über \", _jsx(_components.code, {\n        children: \"onChange\"\n      }), \" zu updaten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"defaultValue\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Input Properties\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das TextField unterstützt die Standard-Properties eines HTML \", _jsx(_components.code, {\n        children: \"\u003cinput /\u003e\"\n      }), \" Feldes.\\n(s. \", _jsx(_components.a, {\n        href: \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\",\n        children: \"MDN\"\n      }), \")\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inputProps\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Character Count\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über das \", _jsx(_components.code, {\n        children: \"showCharacterCount\"\n      }), \" Property wird eine FieldDescription hinzugefügt,\\ndie aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl\\nanzeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"characterCount\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"190:T212b,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont, LiveCodeEditor} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Frage nur nach Informationen, die wirklich notwendig sind.\"\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"Stelle sicher, dass das \", _jsx(_components.a, {\n          href: \"/02-components/content/label\",\n          children: \"Label\"\n        }), \" prägnant,\\nvollständig sichtbar und leicht verständlich ist.\"]\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Verwende die FieldDescription für sinnvolle Beispiele oder\\nFormatierungshinweise.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen hilfreich sind, eine Lösung bieten und\\nleicht umzusetzen sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Verwende keine Placeholder für wesentliche Informationen.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Position\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das TextField wird meistens innerhalb eines\\n\", _jsx(_components.a, {\n        href: \"/02-components/structure/column-layout\",\n        children: \"ColumnLayouts\"\n      }), \" platziert und füllt dort\\nimmer die zur Verfügung stehende Breite. Dadurch folgt es auch einer Aufteilung\\nin Spalten, sofern das ColumnLayout eine vorsieht. Am besten eignet sich ein 1:1\\nRaster für TextFields, sodass sie maximal die Hälfte des Content-Bereichs\\neinnehmen können. Das ColumnLayout kann zudem erweitert werden, um\\nspezifischeren Layoutanforderungen gerecht zu werden.\"]\n    }), \"\\n\", _jsxs(Do, {\n      example: \"columnLayout\",\n      children: [_jsx(_components.h4, {\n        children: \"Do\"\n      }), _jsxs(_components.p, {\n        children: [\"Nutze ein 1:1 \", _jsx(_components.a, {\n          href: \"/02-components/structure/column-layout\",\n          children: \"ColumnLayout\"\n        }), \" für\\nTextFields. Darin kann ein weiteres Raster (z.B. 2:1) verwendet werden, um\\nsinnvolle Gruppierungen (z.B. Straße und Hausnummer) innerhalb des Layouts zu\\nerstellen.\"]\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"isRequired\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Um ein TextField als erforderlich zu markieren, benutze das dazugehörige\\nProperty \", _jsx(_components.code, {\n        children: \"isRequired\"\n      }), \". Felder, die nicht required sind, werden als optional\\ngekennzeichnet.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inhalt\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Label\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Jedes TextField muss ein zugehöriges \", _jsx(_components.a, {\n        href: \"/02-components/content/label\",\n        children: \"Label\"\n      }), \"\\nbesitzen. Das Label ist entscheidend, um die Eingabeanforderungen zu verstehen\\nund sollte daher so gewählt werden, dass es alle Informationen liefert, um das\\nTextField korrekt ausfüllen zu können. Außerdem sollte das Label knapp (max. 2\\nWörter), präzise und weder versteckt noch auspunktiert sein.\"]\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        example: \"withoutLabel\",\n        children: [_jsx(_components.h4, {\n          children: \"Dont\"\n        }), _jsx(_components.p, {\n          children: \"Das TextField darf nie ohne ein zugehöriges Label verwendet werden.\"\n        })]\n      }), _jsxs(Do, {\n        example: \"default\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Verwende ein kurzes, präzises Label, das essentielle Eingabeanforderungen kommuniziert.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"FieldDescription\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Die FieldDescription kann als optionaler Hilfstext unterhalb des TextFields\\nangezeigt werden, um dem Nutzer ergänzenden Informationen oder Anweisungen zu\\nbieten. Sie sollte sparsam verwendet werden und kann Eingabe- und\\nFormatierungsbeispiele liefern.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Placeholder\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Placeholder sind nicht accessible und dürfen daher keine Informationen\\nenthalten, die für das korrekte Ausfüllen des TextFields erforderlich sind. Das\\ngrößte Problem ist, dass Placeholder verschwinden, sobald Text eingegeben wird.\\nDarüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkann\\nund sind kognitiv schwieriger zu verarbeiten als die FieldDescritption. Statt\\neinen Placeholder zu verwenden, ergänze das TextField mit ...\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"einem \", _jsx(_components.a, {\n          href: \"/02-components/content/label\",\n          children: \"Label\"\n        }), \" für Informationen, die essenziell\\nfür das Verständnis der Eingabeanforderungen sind.\"]\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"einer FieldDescription, um dem Nutzer Beispiele oder Formatierungshinweise zu\\ngeben.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        example: \"placeholder\",\n        children: [_jsx(_components.h4, {\n          children: \"Dont\"\n        }), _jsx(_components.p, {\n          children: \"Placeholder sollten keine essentiellen Informationen oder Formatierungshinweise enthalten.\"\n        })]\n      }), _jsxs(Do, {\n        example: \"default\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsxs(_components.p, {\n          children: [\"Verwende das \", _jsx(_components.a, {\n            href: \"/02-components/content/label\",\n            children: \"Label\"\n          }), \" für essentielle Informationen und die FieldDescription für Ergänzungen, z.B. Formatierungshinweise oder Beispiele.\"]\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Das TextField kann sowohl über die Tastatur erreicht und aktiviert werden als\\nauch mit Assistenztechnologien angesteuert werden. Damit auch der Inhalt\\nbarrierefrei ist, solltest du:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"immer ein \", _jsx(_components.a, {\n          href: \"/02-components/content/label\",\n          children: \"Label\"\n        }), \" verwenden, welches essenzielle\\nEingabeanforderungen über das Label kommuniziert.\"]\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"die FieldDescription nutzen, um Unterstützung, Beispiele oder\\nFormatierungshilfen zu geben.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Placeholder nicht für Inhalte verwenden, die zum Ausfüllen des TextFields\\nhilfreich sind.\"\n      }), \"\\n\"]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",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.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/overview.mdx\"}}]}]]}],\"$undefined\",[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Guidelines\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/guidelines.mdx\"}}]}]]}]]}]}]]\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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">TextField</h1>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.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-describedby="react-aria-:R6cvfajaH3: react-aria-:R6cvfajaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R6cvfajaH1:" for="react-aria-:R6cvfaja:">URL<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R6cvfajaH3:" slot="description">Beginnt mit https://</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/form-controls/text-field\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/form-controls/text-field\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/form-controls/text-field\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"form-controls\\\",\\\"text-field\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T137f,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Playground\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Verwende \", _jsx(_components.code, {\n        children: \"\u003cTextField /\u003e\"\n      }), \", um ein TextField anzuzeigen. Integriere immer ein\\n\", _jsx(_components.code, {\n        children: \"\u003cLabel /\u003e\"\n      }), \", um Informationen zu vermitteln, die für das Verständnis der\\nEingabeanforderungen unerlässlich sind. Optional können zusätzliche\\nInformationen (z.B. Formatierungshinweise) über die \", _jsx(_components.code, {\n        children: \"\u003cFieldDescription /\u003e\"\n      }), \"\\nergänzt werden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Disabled\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn das TextField disabled ist, kann nicht mit ihm interagiert werden. Sobald\\ndie Ursache für die Deaktivierung behoben ist, kann das TextField wieder normal\\nverwendet werden.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"disabled\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Validierung\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um das textField zu validieren, stehen folgende Properties zur Verfügung:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.code, {\n          children: \"isRequired\"\n        }), \" für Pflichtfelder.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [_jsx(_components.code, {\n          children: \"validate\"\n        }), \" für eigene Validierungen.\"]\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"HTML Input Properties wie \", _jsx(_components.code, {\n          children: \"type=”email”\"\n        }), \", \", _jsx(_components.code, {\n          children: \"minLength\"\n        }), \".\"]\n      }), \"\\n\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Wenn die Benutzereingabe nicht den Anforderungen entspricht, wird das TextField\\ninvalidiert. Mittels \", _jsx(_components.code, {\n        children: \"\u003cFieldError /\u003e\"\n      }), \" kann eine Fehlermeldung angezeigt werden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"invalid\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Value\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Standardmäßig ist der Value eines TextFields leer. Es ist möglich dem TextField\\neine uncontrolled \", _jsx(_components.code, {\n        children: \"defaultValue\"\n      }), \" mitzugeben. Es kann auch ein controlled \", _jsx(_components.code, {\n        children: \"value\"\n      }), \"\\nfür das TextField gesetzt werden, um dieses über \", _jsx(_components.code, {\n        children: \"onChange\"\n      }), \" zu updaten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"defaultValue\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Input Properties\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das TextField unterstützt die Standard-Properties eines HTML \", _jsx(_components.code, {\n        children: \"\u003cinput /\u003e\"\n      }), \" Feldes.\\n(s. \", _jsx(_components.a, {\n        href: \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\",\n        children: \"MDN\"\n      }), \")\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"inputProps\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Character Count\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über das \", _jsx(_components.code, {\n        children: \"showCharacterCount\"\n      }), \" Property wird eine FieldDescription hinzugefügt,\\ndie aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl\\nanzeigt.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"characterCount\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"190:T212b,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    a: \"a\",\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont, LiveCodeEditor} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Frage nur nach Informationen, die wirklich notwendig sind.\"\n      }), \"\\n\", _jsxs(_components.li, {\n        children: [\"Stelle sicher, dass das \", _jsx(_components.a, {\n          href: \"/02-components/content/label\",\n          children: \"Label\"\n        }), \" prägnant,\\nvollständig sichtbar und leicht verständlich ist.\"]\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Verwende die FieldDescription für sinnvolle Beispiele oder\\nFormatierungshinweise.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen hilfreich sind, eine Lösung bieten und\\nleicht umzusetzen sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Verwende keine Placeholder für wesentliche Informationen.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Anwendung\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Position\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Das TextField wird meistens innerhalb eines\\n\", _jsx(_components.a, {\n        href: \"/02-components/structure/column-layout\",\n        children: \"ColumnLayouts\"\n      }), \" platziert und füllt dort\\nimmer die zur Verfügung stehende Breite. Dadurch folgt es auch einer Aufteilung\\nin Spalten, sofern das ColumnLayout eine vorsieht. Am besten eignet sich ein 1:1\\nRaster für TextFields, sodass sie maximal die Hälfte des Content-Bereichs\\neinnehmen können. Das ColumnLayout kann zudem erweitert werden, um\\nspezifischeren Layoutanforderungen gerecht zu werden.\"]\n    }), \"\\n\", _jsxs(Do, {\n      example: \"columnLayout\",\n      children: [_jsx(_components.h4, {\n        children: \"Do\"\n      }), _jsxs(_components.p, {\n        children: [\"Nutze ein 1:1 \", _jsx(_components.a, {\n          href: \"/02-components/structure/column-layout\",\n          children: \"ColumnLayout\"\n        }), \" für\\nTextFields. Darin kann ein weiteres Raster (z.B. 2:1) verwendet werden, um\\nsinnvolle Gruppierungen (z.B. Straße und Hausnummer) innerhalb des Layouts zu\\nerstellen.\"]\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"isRequired\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Um ein TextField als erforderlich zu markieren, benutze das dazugehörige\\nProperty \", _jsx(_components.code, {\n        children: \"isRequired\"\n      }), \". Felder, die nicht required sind, werden als optional\\ngekennzeichnet.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"required\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Inhalt\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Label\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Jedes TextField muss ein zugehöriges \", _jsx(_components.a, {\n        href: \"/02-components/content/label\",\n        children: \"Label\"\n      }), \"\\nbesitzen. Das Label ist entscheidend, um die Eingabeanforderungen zu verstehen\\nund sollte daher so gewählt werden, dass es alle Informationen liefert, um das\\nTextField korrekt ausfüllen zu können. Außerdem sollte das Label knapp (max. 2\\nWörter), präzise und weder versteckt noch auspunktiert sein.\"]\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        example: \"withoutLabel\",\n        children: [_jsx(_components.h4, {\n          children: \"Dont\"\n        }), _jsx(_components.p, {\n          children: \"Das TextField darf nie ohne ein zugehöriges Label verwendet werden.\"\n        })]\n      }), _jsxs(Do, {\n        example: \"default\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Verwende ein kurzes, präzises Label, das essentielle Eingabeanforderungen kommuniziert.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"FieldDescription\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Die FieldDescription kann als optionaler Hilfstext unterhalb des TextFields\\nangezeigt werden, um dem Nutzer ergänzenden Informationen oder Anweisungen zu\\nbieten. Sie sollte sparsam verwendet werden und kann Eingabe- und\\nFormatierungsbeispiele liefern.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Placeholder\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Placeholder sind nicht accessible und dürfen daher keine Informationen\\nenthalten, die für das korrekte Ausfüllen des TextFields erforderlich sind. Das\\ngrößte Problem ist, dass Placeholder verschwinden, sobald Text eingegeben wird.\\nDarüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkann\\nund sind kognitiv schwieriger zu verarbeiten als die FieldDescritption. Statt\\neinen Placeholder zu verwenden, ergänze das TextField mit ...\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"einem \", _jsx(_components.a, {\n          href: \"/02-components/content/label\",\n          children: \"Label\"\n        }), \" für Informationen, die essenziell\\nfür das Verständnis der Eingabeanforderungen sind.\"]\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"einer FieldDescription, um dem Nutzer Beispiele oder Formatierungshinweise zu\\ngeben.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        example: \"placeholder\",\n        children: [_jsx(_components.h4, {\n          children: \"Dont\"\n        }), _jsx(_components.p, {\n          children: \"Placeholder sollten keine essentiellen Informationen oder Formatierungshinweise enthalten.\"\n        })]\n      }), _jsxs(Do, {\n        example: \"default\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsxs(_components.p, {\n          children: [\"Verwende das \", _jsx(_components.a, {\n            href: \"/02-components/content/label\",\n            children: \"Label\"\n          }), \" für essentielle Informationen und die FieldDescription für Ergänzungen, z.B. Formatierungshinweise oder Beispiele.\"]\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Das TextField kann sowohl über die Tastatur erreicht und aktiviert werden als\\nauch mit Assistenztechnologien angesteuert werden. Damit auch der Inhalt\\nbarrierefrei ist, solltest du:\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsxs(_components.li, {\n        children: [\"immer ein \", _jsx(_components.a, {\n          href: \"/02-components/content/label\",\n          children: \"Label\"\n        }), \" verwenden, welches essenzielle\\nEingabeanforderungen über das Label kommuniziert.\"]\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"die FieldDescription nutzen, um Unterstützung, Beispiele oder\\nFormatierungshilfen zu geben.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Placeholder nicht für Inhalte verwenden, die zum Ausfüllen des TextFields\\nhilfreich sind.\"\n      }), \"\\n\"]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",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.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/overview.mdx\"}}]}]]}],\"$undefined\",[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Guidelines\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/guidelines.mdx\"}}]}]]}]]}]}]]\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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/form-controls/text-field.txt b/docs/fix/getting-started-typos/03-components/form-controls/text-field.txt
index 3c7aa39972..4ac69f8636 100644
--- a/docs/fix/getting-started-typos/03-components/form-controls/text-field.txt
+++ b/docs/fix/getting-started-typos/03-components/form-controls/text-field.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/form-controls/text-field","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/form-controls/text-field","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"text-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/form-controls/text-field","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"form-controls\",\"text-field\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.html b/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.html
index b51f1a5686..d87df752e1 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.html
+++ b/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Breadcrumb</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Breadcrumb</h1>Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><ol class="flow--breadcrumb"><li class="flow--breadcrumb--breadcrumb-item"><a class="flow--breadcrumb--link" href="#">Projekte</a><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-chevron-right flow--icon flow--breadcrumb--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M9 6l6 6l-6 6"></path></svg></li><li class="flow--breadcrumb--breadcrumb-item"><a class="flow--breadcrumb--link" href="#">Apps</a><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-chevron-right flow--icon flow--breadcrumb--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M9 6l6 6l-6 6"></path></svg></li><li class="flow--breadcrumb--breadcrumb-item"><a class="flow--breadcrumb--link" href="#">Meine App</a><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-chevron-right flow--icon flow--breadcrumb--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M9 6l6 6l-6 6"></path></svg></li></ol></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/breadcrumb\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/breadcrumb\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/breadcrumb\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"breadcrumb\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T5e9,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",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.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Breadcrumb</h1>Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><ol class="flow--breadcrumb"><li class="flow--breadcrumb--breadcrumb-item"><a class="flow--breadcrumb--link" href="#">Projekte</a><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-chevron-right flow--icon flow--breadcrumb--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M9 6l6 6l-6 6"></path></svg></li><li class="flow--breadcrumb--breadcrumb-item"><a class="flow--breadcrumb--link" href="#">Apps</a><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-chevron-right flow--icon flow--breadcrumb--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M9 6l6 6l-6 6"></path></svg></li><li class="flow--breadcrumb--breadcrumb-item"><a class="flow--breadcrumb--link" href="#">Meine App</a><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-chevron-right flow--icon flow--breadcrumb--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M9 6l6 6l-6 6"></path></svg></li></ol></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/breadcrumb\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/breadcrumb\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/breadcrumb\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"breadcrumb\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T5e9,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",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.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.txt b/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.txt
index d22a6a285c..030cdb6c1d 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.txt
+++ b/docs/fix/getting-started-typos/03-components/navigation/breadcrumb.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/breadcrumb","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/navigation/breadcrumb","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"breadcrumb\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/navigation/breadcrumb","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"breadcrumb\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/navigation/header-navigation.html b/docs/fix/getting-started-typos/03-components/navigation/header-navigation.html
index 7a6ab11a29..f76993a872 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/header-navigation.html
+++ b/docs/fix/getting-started-typos/03-components/navigation/header-navigation.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>HeaderNavigation</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">HeaderNavigation</h1>Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><nav class="flow--header-navigation" role="navigation" aria-label="Header navigation"><ul><li><a class="flow--header-navigation--link" href="#"><span class="flow--emulated-bold-text">Getting startet<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Getting startet</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="#"><span class="flow--emulated-bold-text">Komponenten<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Komponenten</span></span></a></li><li><button type="button" class="flow--button flow--button--primary flow--button--plain flow--header-navigation--button" 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-search flow--icon flow--button--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></span></button></li></ul></nav></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/header-navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/header-navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/header-navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"header-navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T6ba,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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      editorCollapsed: tru"])</script><script>self.__next_f.push([1,"e\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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    \u003cContextMen"])</script><script>self.__next_f.push([1,"u\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;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"HeaderNavigation\"}],\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"contextMenu\":\"$191\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">HeaderNavigation</h1>Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><nav class="flow--header-navigation" role="navigation" aria-label="Header navigation"><ul><li><a class="flow--header-navigation--link" href="#"><span class="flow--emulated-bold-text">Getting startet<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Getting startet</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="#"><span class="flow--emulated-bold-text">Komponenten<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Komponenten</span></span></a></li><li><button type="button" class="flow--button flow--button--primary flow--button--plain flow--header-navigation--button" 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-search flow--icon flow--button--icon flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></span></button></li></ul></nav></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/header-navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/header-navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/header-navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"header-navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T6ba,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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      editorCollapsed: tru"])</script><script>self.__next_f.push([1,"e\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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    \u003cContextMen"])</script><script>self.__next_f.push([1,"u\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;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"HeaderNavigation\"}],\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"contextMenu\":\"$191\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/navigation/header-navigation.txt b/docs/fix/getting-started-typos/03-components/navigation/header-navigation.txt
index 5a01d36465..ac30080fec 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/header-navigation.txt
+++ b/docs/fix/getting-started-typos/03-components/navigation/header-navigation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/header-navigation","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/navigation/header-navigation","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"header-navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/navigation/header-navigation","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"header-navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/navigation/link.html b/docs/fix/getting-started-typos/03-components/navigation/link.html
index e577d88e50..256385c04b 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/link.html
+++ b/docs/fix/getting-started-typos/03-components/navigation/link.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Link</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Link</h1>Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><a class="flow--link" href="#">Zum Dashboard</a></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/link\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/link\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/link\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"link\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T973,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Link\"}],\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Link</h1>Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><a class="flow--link" href="#">Zum Dashboard</a></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/link\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/link\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/link\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"link\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T973,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Static Colors\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Dark\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"dark\",\n      lightBackground: true,\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Light\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"light\",\n      darkBackground: true,\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Link\"}],\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/navigation/link.txt b/docs/fix/getting-started-typos/03-components/navigation/link.txt
index 6b311517e6..6701ec8790 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/link.txt
+++ b/docs/fix/getting-started-typos/03-components/navigation/link.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/link","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/navigation/link","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"link\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/navigation/link","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"link\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/navigation/navigation.html b/docs/fix/getting-started-typos/03-components/navigation/navigation.html
index fc13e145e4..c644066045 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/navigation.html
+++ b/docs/fix/getting-started-typos/03-components/navigation/navigation.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Navigation</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Navigation</h1>Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><nav class="flow--navigation" role="navigation" aria-label="Companies"><ul><li><a class="flow--navigation--item" href="https://www.apple.com">Apple</a></li><li><a aria-current="page" class="flow--navigation--item" href="https://www.mittwald.de">mittwald</a></li><li><a class="flow--navigation--item" href="https://www.adobe.com">Adobe</a></li><li><a class="flow--navigation--item" href="https://www.google.com">Google</a></li></ul></nav></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T71c,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Separator\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"separator\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Navigation\"}],\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Navigation</h1>Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><nav class="flow--navigation" role="navigation" aria-label="Companies"><ul><li><a class="flow--navigation--item" href="https://www.apple.com">Apple</a></li><li><a aria-current="page" class="flow--navigation--item" href="https://www.mittwald.de">mittwald</a></li><li><a class="flow--navigation--item" href="https://www.adobe.com">Adobe</a></li><li><a class="flow--navigation--item" href="https://www.google.com">Google</a></li></ul></nav></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/navigation\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/navigation\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/navigation\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"navigation\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T71c,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Mit Separator\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"separator\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Navigation\"}],\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/navigation/navigation.txt b/docs/fix/getting-started-typos/03-components/navigation/navigation.txt
index 7f88c81463..44decbdf92 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/navigation.txt
+++ b/docs/fix/getting-started-typos/03-components/navigation/navigation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/navigation","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/navigation/navigation","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/navigation/navigation","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"navigation\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/navigation/tabs.html b/docs/fix/getting-started-typos/03-components/navigation/tabs.html
index 3f7732e1eb..143abe8dd8 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/tabs.html
+++ b/docs/fix/getting-started-typos/03-components/navigation/tabs.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Tabs</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Tabs</h1>Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6q6cvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true">Allgemeiner Inhalt</div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true">Speicherplatz Inhalt</div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true">Spamschutz Inhalt</div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/tabs\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/tabs\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/tabs\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"tabs\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T567,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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      example: \"content\"\n    }), \"\\n\""])</script><script>self.__next_f.push([1,", _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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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        \u003cSw"])</script><script>self.__next_f.push([1,"itch\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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Tabs\"}],\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"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\":\"$191\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Tabs</h1>Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6q6cvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true">Allgemeiner Inhalt</div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true">Speicherplatz Inhalt</div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true">Spamschutz Inhalt</div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/navigation/tabs\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/navigation/tabs\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/navigation/tabs\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"navigation\\\",\\\"tabs\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T567,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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      example: \"content\"\n    }), \"\\n\""])</script><script>self.__next_f.push([1,", _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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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        \u003cSw"])</script><script>self.__next_f.push([1,"itch\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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Tabs\"}],\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"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\":\"$191\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/navigation/tabs.txt b/docs/fix/getting-started-typos/03-components/navigation/tabs.txt
index 7c887043a0..a241f66f08 100644
--- a/docs/fix/getting-started-typos/03-components/navigation/tabs.txt
+++ b/docs/fix/getting-started-typos/03-components/navigation/tabs.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/tabs","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/navigation/tabs","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"tabs\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/navigation/tabs","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"navigation\",\"tabs\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/overlays/contextual-help.html b/docs/fix/getting-started-typos/03-components/overlays/contextual-help.html
index a0c337259b..c07c7e8613 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/contextual-help.html
+++ b/docs/fix/getting-started-typos/03-components/overlays/contextual-help.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>ContextualHelp</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ContextualHelp</h1>Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextualHelp">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-expanded="false" id="react-aria-:R6cvfajaH1:" aria-label="More information" class="flow--button flow--button--size-s flow--button--primary 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-info-circle flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/contextual-help\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/contextual-help\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/contextual-help\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"contextual-help\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/contextual-help\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ContextualHelp\"}],\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextualHelp\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/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\":\"ContextualHelp\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ContextualHelp</h1>Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextualHelp">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-expanded="false" id="react-aria-:R6cvfajaH1:" aria-label="More information" class="flow--button flow--button--size-s flow--button--primary 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-info-circle flow--icon flow--button--icon flow--icon--size-s" aria-hidden="true" focusable="false" role="img"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/contextual-help\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/contextual-help\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/contextual-help\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"contextual-help\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/contextual-help\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ContextualHelp\"}],\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextualHelp\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/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\":\"ContextualHelp\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/overlays/contextual-help.txt b/docs/fix/getting-started-typos/03-components/overlays/contextual-help.txt
index 31bcd7acca..0b9bf75578 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/contextual-help.txt
+++ b/docs/fix/getting-started-typos/03-components/overlays/contextual-help.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/overlays/contextual-help","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/overlays/contextual-help","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"contextual-help\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/overlays/contextual-help","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/overlays/contextual-help","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"contextual-help\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/overlays/contextual-help","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/overlays/modal.html b/docs/fix/getting-started-typos/03-components/overlays/modal.html
index 47ea32fd47..942d666b38 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/modal.html
+++ b/docs/fix/getting-started-typos/03-components/overlays/modal.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Modal</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Modal</h1>Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-expanded="false" id="react-aria-:R6cvfajaH1:" class="flow--button flow--button--accent flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Organisation anlegen</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/modal\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/modal\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/modal\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"modal\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n190:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n18d:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-c"])</script><script>self.__next_f.push([1,"omponents/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n191:T4d5,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ?"])</script><script>self.__next_f.push([1," \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n192:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n193:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Bu"])</script><script>self.__next_f.push([1,"tton\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Modal\"}],\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"offCanvas\":\"$18d\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":[[\"$\",\"$L190\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$191\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$192\",\"offCanvas\":\"$193\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Modal</h1>Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-expanded="false" id="react-aria-:R6cvfajaH1:" class="flow--button flow--button--accent flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Organisation anlegen</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/modal\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/modal\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/modal\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"modal\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n190:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n18d:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-c"])</script><script>self.__next_f.push([1,"omponents/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n191:T4d5,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ?"])</script><script>self.__next_f.push([1," \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n192:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n193:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Bu"])</script><script>self.__next_f.push([1,"tton\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Modal\"}],\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"offCanvas\":\"$18d\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":[[\"$\",\"$L190\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$191\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$192\",\"offCanvas\":\"$193\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/overlays/modal.txt b/docs/fix/getting-started-typos/03-components/overlays/modal.txt
index fb8f0dcf43..3edf88799b 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/modal.txt
+++ b/docs/fix/getting-started-typos/03-components/overlays/modal.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/overlays/modal","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/overlays/modal","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"modal\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/overlays/modal","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"modal\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/overlays/off-canvas.html b/docs/fix/getting-started-typos/03-components/overlays/off-canvas.html
index 4ea6a74654..6d3ee15476 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/off-canvas.html
+++ b/docs/fix/getting-started-typos/03-components/overlays/off-canvas.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>OffCanvas</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">OffCanvas</h1>Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-expanded="false" id="react-aria-:R6cvfajaH1:" 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-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></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/off-canvas\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/off-canvas\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/off-canvas\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"off-canvas\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n190:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : "])</script><script>self.__next_f.push([1,"\"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",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\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$191\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">OffCanvas</h1>Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-expanded="false" id="react-aria-:R6cvfajaH1:" 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-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></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/off-canvas\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/off-canvas\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/off-canvas\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"off-canvas\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n190:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : "])</script><script>self.__next_f.push([1,"\"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",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\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$191\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/overlays/off-canvas.txt b/docs/fix/getting-started-typos/03-components/overlays/off-canvas.txt
index 2832564148..aba2334776 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/off-canvas.txt
+++ b/docs/fix/getting-started-typos/03-components/overlays/off-canvas.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/overlays/off-canvas","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/overlays/off-canvas","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"off-canvas\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/overlays/off-canvas","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"off-canvas\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/overlays/tooltip.html b/docs/fix/getting-started-typos/03-components/overlays/tooltip.html
index 79754700db..6b0aa3286e 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/tooltip.html
+++ b/docs/fix/getting-started-typos/03-components/overlays/tooltip.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Tooltip</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Tooltip</h1>Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-label="Speichern" 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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/tooltip\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/tooltip\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/tooltip\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"tooltip\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Tooltip\"}],\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Tooltip</h1>Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" aria-label="Speichern" 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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/overlays/tooltip\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/overlays/tooltip\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/overlays/tooltip\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"overlays\\\",\\\"tooltip\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Tooltip\"}],\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/overlays/tooltip.txt b/docs/fix/getting-started-typos/03-components/overlays/tooltip.txt
index 1726d75270..2d63a6e978 100644
--- a/docs/fix/getting-started-typos/03-components/overlays/tooltip.txt
+++ b/docs/fix/getting-started-typos/03-components/overlays/tooltip.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/overlays/tooltip","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/overlays/tooltip","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"tooltip\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/overlays/tooltip","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"overlays\",\"tooltip\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/counter-label.html b/docs/fix/getting-started-typos/03-components/status/counter-label.html
index c6824856c8..c8fe93f965 100644
--- a/docs/fix/getting-started-typos/03-components/status/counter-label.html
+++ b/docs/fix/getting-started-typos/03-components/status/counter-label.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>CounterBadge</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CounterBadge</h1>Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CounterBadge">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><span class="flow--counter-badge" aria-hidden="true">5</span></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/counter-label\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/counter-label\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/counter-label\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"counter-label\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/status/counter-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T90d,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Ohne Inhalt\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"without-content\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Hohe Zahlen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ist der tatsächliche Wert 100 oder höher, wird stattdessen \\\"99+\\\" im CounterBadge\\nangezeigt.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"high-number\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Innerhalb eines Buttons\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um sich bei der Verwendung auf anderen Elementen besser von diesen abzuheben,\\nhat das CounterBadge eine Border. Diese ist im Default weiß und muss jeweils an\\ndie Hintergrundfarbe angepasst werden.\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Da das CounterBadge selbst nicht accessible ist, muss der Wert über das\\ndarunterliegende Element vermittelt werden, in diesem Beispiel erhält der Button\\nein Aria Label, das die Zahl des Counters enthält.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"with-button\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CounterBadge\"}],\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CounterBadge\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-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\":\"CounterBadge\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">CounterBadge</h1>Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/CounterBadge">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><span class="flow--counter-badge" aria-hidden="true">5</span></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/counter-label\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/counter-label\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/counter-label\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"counter-label\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/status/counter-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T90d,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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: \"Ohne Inhalt\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"without-content\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Hohe Zahlen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ist der tatsächliche Wert 100 oder höher, wird stattdessen \\\"99+\\\" im CounterBadge\\nangezeigt.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"high-number\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Innerhalb eines Buttons\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um sich bei der Verwendung auf anderen Elementen besser von diesen abzuheben,\\nhat das CounterBadge eine Border. Diese ist im Default weiß und muss jeweils an\\ndie Hintergrundfarbe angepasst werden.\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Accessibility\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Da das CounterBadge selbst nicht accessible ist, muss der Wert über das\\ndarunterliegende Element vermittelt werden, in diesem Beispiel erhält der Button\\nein Aria Label, das die Zahl des Counters enthält.\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"with-button\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"CounterBadge\"}],\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CounterBadge\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-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\":\"CounterBadge\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/counter-label.txt b/docs/fix/getting-started-typos/03-components/status/counter-label.txt
index e26540da36..91901d609d 100644
--- a/docs/fix/getting-started-typos/03-components/status/counter-label.txt
+++ b/docs/fix/getting-started-typos/03-components/status/counter-label.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/counter-label","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/counter-label","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"counter-label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/status/counter-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/counter-label","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"counter-label\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/status/counter-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/inline-alert.html b/docs/fix/getting-started-typos/03-components/status/inline-alert.html
index 57212a943d..efc4b9259d 100644
--- a/docs/fix/getting-started-typos/03-components/status/inline-alert.html
+++ b/docs/fix/getting-started-typos/03-components/status/inline-alert.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>InlineAlert</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">InlineAlert</h1>Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><aside class="flow--inline-alert flow--inline-alert--info"><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--inline-alert--status-icon flow--icon--size-m" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><h3 class="flow--heading flow--heading--h3 flow--inline-alert--heading">E-Mail-Adresse wurde archiviert</h3></aside></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/inline-alert\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/inline-alert\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/inline-alert\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"inline-alert\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T58d,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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      editorCollapsed: true\n    }), \"\\n\", _jsx(_co"])</script><script>self.__next_f.push([1,"mponents.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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"InlineAlert\"}],\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"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\":\"$191\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">InlineAlert</h1>Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><aside class="flow--inline-alert flow--inline-alert--info"><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--inline-alert--status-icon flow--icon--size-m" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><h3 class="flow--heading flow--heading--h3 flow--inline-alert--heading">E-Mail-Adresse wurde archiviert</h3></aside></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/inline-alert\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/inline-alert\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/inline-alert\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"inline-alert\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T58d,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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      editorCollapsed: true\n    }), \"\\n\", _jsx(_co"])</script><script>self.__next_f.push([1,"mponents.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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"InlineAlert\"}],\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"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\":\"$191\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/inline-alert.txt b/docs/fix/getting-started-typos/03-components/status/inline-alert.txt
index 7a820dc9c1..01f9594a5b 100644
--- a/docs/fix/getting-started-typos/03-components/status/inline-alert.txt
+++ b/docs/fix/getting-started-typos/03-components/status/inline-alert.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/inline-alert","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/inline-alert","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"inline-alert\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/inline-alert","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"inline-alert\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/loading-spinner.html b/docs/fix/getting-started-typos/03-components/status/loading-spinner.html
index 092fc7d9b5..82bdbd5aae 100644
--- a/docs/fix/getting-started-typos/03-components/status/loading-spinner.html
+++ b/docs/fix/getting-started-typos/03-components/status/loading-spinner.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>LoadingSpinner</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">LoadingSpinner</h1>Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/loading-spinner\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/loading-spinner\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/loading-spinner\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"loading-spinner\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"LoadingSpinner\"}],\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">LoadingSpinner</h1>Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/loading-spinner\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/loading-spinner\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/loading-spinner\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"loading-spinner\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"LoadingSpinner\"}],\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/loading-spinner.txt b/docs/fix/getting-started-typos/03-components/status/loading-spinner.txt
index 37d4d84916..31cb4735e8 100644
--- a/docs/fix/getting-started-typos/03-components/status/loading-spinner.txt
+++ b/docs/fix/getting-started-typos/03-components/status/loading-spinner.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/loading-spinner","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/loading-spinner","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"loading-spinner\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/loading-spinner","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"loading-spinner\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/notification-provider.html b/docs/fix/getting-started-typos/03-components/status/notification-provider.html
index 126b1b9718..6659419afb 100644
--- a/docs/fix/getting-started-typos/03-components/status/notification-provider.html
+++ b/docs/fix/getting-started-typos/03-components/status/notification-provider.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>NotificationProvider</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">NotificationProvider</h1>Die NotificationProvider dient zur Anzeige und Steuerung von Notifications<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/NotificationProvider">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Trigger Notification</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/notification-provider\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/notification-provider\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification-provider\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"notification-provider\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification-provider\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T895,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Initialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Damit Notifications angezeigt werden können, muss der \", _jsx(_components.code, {\n        children: \"\u003cNotificationProvider /\u003e\"\n      }), \"\\nals obere Komponente existieren.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"provider\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Notifications anzeigen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über den \", _jsx(_components.code, {\n        children: \"useNotificationController()\"\n      }), \" Hook kann auf den Notification-Controller\\nzugegriffen werden. Dieser stellt zum Anzeigen einer Notification die\\n\", _jsx(_components.code, {\n        children: \"add()\"\n      }), \"-Method bereit.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Auto close\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Ist das Property \", _jsx(_components.code, {\n        children: \"autoClose\"\n      }), \" gesetzt, verschwinden die Notifications nach 10\\nSekunden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"auto-close\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"NotificationProvider\"}],\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NotificationProvider\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/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\":\"NotificationProvider\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">NotificationProvider</h1>Die NotificationProvider dient zur Anzeige und Steuerung von Notifications<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/NotificationProvider">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><button type="button" class="flow--button flow--button--primary flow--button--solid" data-rac=""><span class="flow--button--content"><span class="flow--button--text">Trigger Notification</span></span></button></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/notification-provider\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/notification-provider\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification-provider\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"notification-provider\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification-provider\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T895,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {LiveCodeEditor} = _components;\n  if (!LiveCodeEditor) _missingMdxReference(\"LiveCodeEditor\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Initialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Damit Notifications angezeigt werden können, muss der \", _jsx(_components.code, {\n        children: \"\u003cNotificationProvider /\u003e\"\n      }), \"\\nals obere Komponente existieren.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"provider\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Notifications anzeigen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Über den \", _jsx(_components.code, {\n        children: \"useNotificationController()\"\n      }), \" Hook kann auf den Notification-Controller\\nzugegriffen werden. Dieser stellt zum Anzeigen einer Notification die\\n\", _jsx(_components.code, {\n        children: \"add()\"\n      }), \"-Method bereit.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Auto close\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Ist das Property \", _jsx(_components.code, {\n        children: \"autoClose\"\n      }), \" gesetzt, verschwinden die Notifications nach 10\\nSekunden.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"auto-close\",\n      editorCollapsed: true\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"NotificationProvider\"}],\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NotificationProvider\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/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\":\"NotificationProvider\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/notification-provider.txt b/docs/fix/getting-started-typos/03-components/status/notification-provider.txt
index 3ca02c17bf..acdd863482 100644
--- a/docs/fix/getting-started-typos/03-components/status/notification-provider.txt
+++ b/docs/fix/getting-started-typos/03-components/status/notification-provider.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/notification-provider","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/notification-provider","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"notification-provider\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/status/notification-provider","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/notification-provider","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"notification-provider\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/status/notification-provider","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/notification.html b/docs/fix/getting-started-typos/03-components/status/notification.html
index 4345c73a80..5bfbc7bb60 100644
--- a/docs/fix/getting-started-typos/03-components/status/notification.html
+++ b/docs/fix/getting-started-typos/03-components/status/notification.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Notification</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Notification</h1>Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Notification">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--notification flow--notification--info" role="alert"><span class="flow--notification--link" data-rac="" tabindex="0" role="link"><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--notification--status-icon flow--icon--size-m" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><h4 class="flow--heading flow--heading--h4 flow--notification--heading">E-Mail-Adresse archiviert</h4><span class="flow--notification--text">Die E-Mail-Adresse <b>example@mittwald.de</b> wurde archiviert.</span></span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/notification\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/notification\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"notification\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T4cb,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Notification\"}],\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Notification\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/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\":\"Notification\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Notification</h1>Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Notification">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--notification flow--notification--info" role="alert"><span class="flow--notification--link" data-rac="" tabindex="0" role="link"><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--notification--status-icon flow--icon--size-m" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><h4 class="flow--heading flow--heading--h4 flow--notification--heading">E-Mail-Adresse archiviert</h4><span class="flow--notification--text">Die E-Mail-Adresse <b>example@mittwald.de</b> wurde archiviert.</span></span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/notification\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/notification\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"notification\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/status/notification\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T4cb,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Notification\"}],\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Notification\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/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\":\"Notification\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/notification.txt b/docs/fix/getting-started-typos/03-components/status/notification.txt
index 6fd10703d7..e5d22a69aa 100644
--- a/docs/fix/getting-started-typos/03-components/status/notification.txt
+++ b/docs/fix/getting-started-typos/03-components/status/notification.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/notification","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/notification","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"notification\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/status/notification","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/notification","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"notification\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/status/notification","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/progress-bar.html b/docs/fix/getting-started-typos/03-components/status/progress-bar.html
index 36a633fff0..8e5bf8b7d0 100644
--- a/docs/fix/getting-started-typos/03-components/status/progress-bar.html
+++ b/docs/fix/getting-started-typos/03-components/status/progress-bar.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>ProgressBar</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ProgressBar</h1>Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-valuetext="50%" role="progressbar" class="flow--progress-bar flow--progress-bar--info" data-rac=""><span class="flow--progress-bar--label" id="react-aria-:R6cvfajaH1:">Speicher</span><span class="flow--progress-bar--value">50%</span><div class="flow--progress-bar--bar"><div class="flow--progress-bar--fill" style="width:50%"></div></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/progress-bar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/progress-bar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/progress-bar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"progress-bar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T642,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ProgressBar\"}],\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ProgressBar</h1>Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div id="react-aria-:R6cvfaja:" aria-labelledby="react-aria-:R6cvfajaH1:" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-valuetext="50%" role="progressbar" class="flow--progress-bar flow--progress-bar--info" data-rac=""><span class="flow--progress-bar--label" id="react-aria-:R6cvfajaH1:">Speicher</span><span class="flow--progress-bar--value">50%</span><div class="flow--progress-bar--bar"><div class="flow--progress-bar--fill" style="width:50%"></div></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/progress-bar\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/progress-bar\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/progress-bar\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"progress-bar\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T642,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ProgressBar\"}],\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/progress-bar.txt b/docs/fix/getting-started-typos/03-components/status/progress-bar.txt
index 4c4f43c590..e4d71808dd 100644
--- a/docs/fix/getting-started-typos/03-components/status/progress-bar.txt
+++ b/docs/fix/getting-started-typos/03-components/status/progress-bar.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/progress-bar","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/progress-bar","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"progress-bar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/progress-bar","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"progress-bar\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/status-badge.html b/docs/fix/getting-started-typos/03-components/status/status-badge.html
index c5ba5338ad..11ed1eb180 100644
--- a/docs/fix/getting-started-typos/03-components/status/status-badge.html
+++ b/docs/fix/getting-started-typos/03-components/status/status-badge.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>StatusBadge</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">StatusBadge</h1>Der StatusBadge zeigt Informationen zum Zustand eines Elements.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--status-badge flow--status-badge--info"><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--icon--size-s" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><span class="flow--status-badge--text">Archiviert</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/status-badge\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/status-badge\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/status-badge\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"status-badge\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T4cb,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"StatusBadge\"}],\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">StatusBadge</h1>Der StatusBadge zeigt Informationen zum Zustand eines Elements.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--status-badge flow--status-badge--info"><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--icon--size-s" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg><span class="flow--status-badge--text">Archiviert</span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/status-badge\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/status-badge\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/status-badge\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"status-badge\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T4cb,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"StatusBadge\"}],\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/status-badge.txt b/docs/fix/getting-started-typos/03-components/status/status-badge.txt
index 2a19b305e4..fc4ea13ba7 100644
--- a/docs/fix/getting-started-typos/03-components/status/status-badge.txt
+++ b/docs/fix/getting-started-typos/03-components/status/status-badge.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/status-badge","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/status-badge","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"status-badge\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/status-badge","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"status-badge\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/status/status-icon.html b/docs/fix/getting-started-typos/03-components/status/status-icon.html
index 655862bc59..e72f328248 100644
--- a/docs/fix/getting-started-typos/03-components/status/status-icon.html
+++ b/docs/fix/getting-started-typos/03-components/status/status-icon.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>StatusIcon</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">StatusIcon</h1>Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--icon--size-m" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/status-icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/status-icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/status-icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"status-icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T600,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"StatusIcon\"}],\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">StatusIcon</h1>Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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-info-circle flow--icon flow--status-icon flow--status-icon--info flow--icon--size-m" focusable="false" role="img" aria-hidden="false" aria-label="Status information"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path></svg></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/status/status-icon\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/status/status-icon\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/status/status-icon\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"status\\\",\\\"status-icon\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T600,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    hr: \"hr\",\n    p: \"p\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"StatusIcon\"}],\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/status/status-icon.txt b/docs/fix/getting-started-typos/03-components/status/status-icon.txt
index 6032ee7a94..62f30b9647 100644
--- a/docs/fix/getting-started-typos/03-components/status/status-icon.txt
+++ b/docs/fix/getting-started-typos/03-components/status/status-icon.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/status/status-icon","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/status/status-icon","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"status-icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/status/status-icon","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"status\",\"status-icon\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/accordion.html b/docs/fix/getting-started-typos/03-components/structure/accordion.html
index bc2361382d..d1e0abc3d9 100644
--- a/docs/fix/getting-started-typos/03-components/structure/accordion.html
+++ b/docs/fix/getting-started-typos/03-components/structure/accordion.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Accordion</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Accordion</h1>Das Accordion dient dazu Content-Bereiche ein- und auszublenden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--accordion"><h4 class="flow--heading flow--heading--h4 flow--accordion--header"><button type="button" aria-expanded="false" aria-controls=":R6cvfajaH1:" class="flow--accordion--header-button" data-rac="">Accordion Titel<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></h4><div aria-labelledby=":R6cvfaja:" id=":R6cvfajaH1:" role="region" hidden="" class="flow--accordion--content"></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/accordion\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/accordion\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/accordion\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"accordion\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T55e,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Accordion\"}],\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Accordion</h1>Das Accordion dient dazu Content-Bereiche ein- und auszublenden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--accordion"><h4 class="flow--heading flow--heading--h4 flow--accordion--header"><button type="button" aria-expanded="false" aria-controls=":R6cvfajaH1:" class="flow--accordion--header-button" data-rac="">Accordion Titel<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></h4><div aria-labelledby=":R6cvfaja:" id=":R6cvfajaH1:" role="region" hidden="" class="flow--accordion--content"></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/accordion\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/accordion\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/accordion\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"accordion\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T55e,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Accordion\"}],\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/accordion.txt b/docs/fix/getting-started-typos/03-components/structure/accordion.txt
index c77fbeb4bd..9e0c17a07f 100644
--- a/docs/fix/getting-started-typos/03-components/structure/accordion.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/accordion.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/accordion","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/accordion","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"accordion\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/accordion","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"accordion\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/column-layout.html b/docs/fix/getting-started-typos/03-components/structure/column-layout.html
index f90ab8999b..3e22168537 100644
--- a/docs/fix/getting-started-typos/03-components/structure/column-layout.html
+++ b/docs/fix/getting-started-typos/03-components/structure/column-layout.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>ColumnLayout</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ColumnLayout</h1>Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-s:1fr 1fr;--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:R16cvfaja:" aria-labelledby="react-aria-:R16cvfajaH1:" aria-describedby="react-aria-:R16cvfajaH3: react-aria-:R16cvfajaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R16cvfajaH1:" for="react-aria-:R16cvfaja:">Vorname<!-- --> (optional)</label></div><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:R26cvfaja:" aria-labelledby="react-aria-:R26cvfajaH1:" aria-describedby="react-aria-:R26cvfajaH3: react-aria-:R26cvfajaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R26cvfajaH1:" for="react-aria-:R26cvfaja:">Nachname<!-- --> (optional)</label></div></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/column-layout\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/column-layout\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/column-layout\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"column-layout\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T9bf,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ColumnLayout\"}],\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">ColumnLayout</h1>Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-s:1fr 1fr;--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:R16cvfaja:" aria-labelledby="react-aria-:R16cvfajaH1:" aria-describedby="react-aria-:R16cvfajaH3: react-aria-:R16cvfajaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R16cvfajaH1:" for="react-aria-:R16cvfaja:">Vorname<!-- --> (optional)</label></div><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:R26cvfaja:" aria-labelledby="react-aria-:R26cvfajaH1:" aria-describedby="react-aria-:R26cvfajaH3: react-aria-:R26cvfajaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R26cvfajaH1:" for="react-aria-:R26cvfaja:">Nachname<!-- --> (optional)</label></div></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/column-layout\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/column-layout\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/column-layout\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"column-layout\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T9bf,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"ColumnLayout\"}],\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/column-layout.txt b/docs/fix/getting-started-typos/03-components/structure/column-layout.txt
index 119addff45..f575ec8961 100644
--- a/docs/fix/getting-started-typos/03-components/structure/column-layout.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/column-layout.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/column-layout","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/column-layout","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"column-layout\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/column-layout","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"column-layout\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/layout-card.html b/docs/fix/getting-started-typos/03-components/structure/layout-card.html
index 5c900d8d56..dd20e0261b 100644
--- a/docs/fix/getting-started-typos/03-components/structure/layout-card.html
+++ b/docs/fix/getting-started-typos/03-components/structure/layout-card.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>LayoutCard</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">LayoutCard</h1>Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/layout-card\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/layout-card\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/layout-card\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"layout-card\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"LayoutCard\"}],\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">LayoutCard</h1>Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><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></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/layout-card\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/layout-card\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/layout-card\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"layout-card\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"LayoutCard\"}],\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/layout-card.txt b/docs/fix/getting-started-typos/03-components/structure/layout-card.txt
index 10278ddf1d..7cd5b96577 100644
--- a/docs/fix/getting-started-typos/03-components/structure/layout-card.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/layout-card.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/layout-card","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/layout-card","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"layout-card\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/layout-card","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"layout-card\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/list.html b/docs/fix/getting-started-typos/03-components/structure/list.html
index 2ef296bd69..470d292460 100644
--- a/docs/fix/getting-started-typos/03-components/structure/list.html
+++ b/docs/fix/getting-started-typos/03-components/structure/list.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>List</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">List</h1>Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/List">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.6"><div class="flow--list"><div class="flow--list--header"><div class="flow--list--header--picker-list"></div></div><div class="flow--list--items--item-list flow--list--items--is-loading"><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div></div><div class="flow--list--footer"><span><div class="flow--skeleton" aria-hidden="true" style="width:200px"></div></span><button type="button" disabled="" class="flow--button flow--button--size-s flow--button--primary flow--button--plain" data-rac="" data-disabled="true"><span class="flow--button--content"><span class="flow--button--text">Show more</span></span></button></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/list\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/list\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/list\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"list\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n190:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n191:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n18d:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-component"])</script><script>self.__next_f.push([1,"s/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n18e:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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 ? "])</script><script>self.__next_f.push([1,"(\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n192:T4df,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n193:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMen"])</script><script>self.__next_f.push([1,"u from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n194:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {d"])</script><script>self.__next_f.push([1,"omain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n195:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"List\"}],\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/List\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"main\":\"$18d\",\"withLink\":\"$18e\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18f\",null,{\"children\":[[\"$\",\"$L190\",null,{\"children\":[[\"$\",\"$L191\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$192\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$193\",\"main\":\"$194\",\"withLink\":\"$195\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">List</h1>Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/List">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.6"><div class="flow--list"><div class="flow--list--header"><div class="flow--list--header--picker-list"></div></div><div class="flow--list--items--item-list flow--list--items--is-loading"><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div><div class="flow--list--items--item"><div class="flow--skeleton" aria-hidden="true" style="height:3rem"></div><div class="flow--list--items--title"></div></div></div><div class="flow--list--footer"><span><div class="flow--skeleton" aria-hidden="true" style="width:200px"></div></span><button type="button" disabled="" class="flow--button flow--button--size-s flow--button--primary flow--button--plain" data-rac="" data-disabled="true"><span class="flow--button--content"><span class="flow--button--text">Show more</span></span></button></div></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/list\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/list\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/list\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"list\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n190:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n191:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n18d:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-component"])</script><script>self.__next_f.push([1,"s/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n18e:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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 ? "])</script><script>self.__next_f.push([1,"(\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n192:T4df,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n193:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMen"])</script><script>self.__next_f.push([1,"u from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n194:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {d"])</script><script>self.__next_f.push([1,"omain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n195:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"List\"}],\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/List\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"main\":\"$18d\",\"withLink\":\"$18e\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18f\",null,{\"children\":[[\"$\",\"$L190\",null,{\"children\":[[\"$\",\"$L191\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$192\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$193\",\"main\":\"$194\",\"withLink\":\"$195\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/list.txt b/docs/fix/getting-started-typos/03-components/structure/list.txt
index 5e1da723f3..617d606d04 100644
--- a/docs/fix/getting-started-typos/03-components/structure/list.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/list.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/list","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/list","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"list\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/list","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"list\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/section.html b/docs/fix/getting-started-typos/03-components/structure/section.html
index ada9834f0c..c293038c52 100644
--- a/docs/fix/getting-started-typos/03-components/structure/section.html
+++ b/docs/fix/getting-started-typos/03-components/structure/section.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Section</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Section</h1>Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><section class="flow--section"><h2 class="flow--heading flow--heading--h2">Newsletter</h2><span>Kommende Releases, neue Features und Tipps rund um dein Hosting – wir bringen dir das Wichtigste in dein Postfach. Abonniere unseren Newsletter und bleib auf dem Laufenden.</span><a class="flow--link" href="#">Newsletter abonnieren</a></section></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/section\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/section\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/section\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"section\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T65a,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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(_components.hr, {}), \"\\n\", _jsx(_co"])</script><script>self.__next_f.push([1,"mponents.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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Section\"}],\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"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\":\"$191\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Section</h1>Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><section class="flow--section"><h2 class="flow--heading flow--heading--h2">Newsletter</h2><span>Kommende Releases, neue Features und Tipps rund um dein Hosting – wir bringen dir das Wichtigste in dein Postfach. Abonniere unseren Newsletter und bleib auf dem Laufenden.</span><a class="flow--link" href="#">Newsletter abonnieren</a></section></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/section\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/section\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/section\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"section\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c: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;\n190:T65a,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    hr: \"hr\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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(_components.hr, {}), \"\\n\", _jsx(_co"])</script><script>self.__next_f.push([1,"mponents.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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191: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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Section\"}],\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18c\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"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\":\"$191\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/section.txt b/docs/fix/getting-started-typos/03-components/structure/section.txt
index 66504c4159..777a69d2b5 100644
--- a/docs/fix/getting-started-typos/03-components/structure/section.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/section.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/section","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/section","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"section\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/section","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"section\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/separator.html b/docs/fix/getting-started-typos/03-components/structure/separator.html
index 3c019dd308..8f6cfe65a8 100644
--- a/docs/fix/getting-started-typos/03-components/structure/separator.html
+++ b/docs/fix/getting-started-typos/03-components/structure/separator.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Separator</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Separator</h1>A Separator is a horizontal line that separates content.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Separator">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><hr class="flow--separator"/></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/separator\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/separator\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/separator\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"separator\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/separator\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Separator\"}],\"A Separator is a horizontal line that separates content.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Separator\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/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\":\"Separator\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Separator</h1>A Separator is a horizontal line that separates content.<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Separator">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:1"><hr class="flow--separator"/></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/separator\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/separator\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/separator\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"separator\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/separator\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18c:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18f:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Separator\"}],\"A Separator is a horizontal line that separates content.\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Separator\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18c\",null,{\"children\":[[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$18f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/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\":\"Separator\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/separator.txt b/docs/fix/getting-started-typos/03-components/structure/separator.txt
index c5590bc5b2..ae04372b85 100644
--- a/docs/fix/getting-started-typos/03-components/structure/separator.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/separator.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/separator","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/separator","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"separator\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/structure/separator","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/separator","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"separator\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/structure/separator","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/03-components/structure/table.html b/docs/fix/getting-started-typos/03-components/structure/table.html
index 2fe716a8c2..1c604d8f6e 100644
--- a/docs/fix/getting-started-typos/03-components/structure/table.html
+++ b/docs/fix/getting-started-typos/03-components/structure/table.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>Table</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Table</h1>Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Table">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.6"><div class="flow--table--table-container"><span data-focus-scope-start="true" hidden=""></span><table class="flow--table" data-rac="" aria-label="Button Props" id="react-aria-:R6cvfaja:" role="grid" tabindex="0" aria-describedby=""><thead role="rowgroup" class="flow--table--header"><tr role="row"><th tabindex="-1" data-key="react-aria-2" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-2" class="flow--table--column" data-rac="">Name</th><th tabindex="-1" data-key="react-aria-3" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-3" class="flow--table--column" data-rac="">Type</th><th tabindex="-1" data-key="react-aria-4" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-4" class="flow--table--column" data-rac="">Default</th><th tabindex="-1" data-key="react-aria-5" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-5" class="flow--table--column" data-rac="">Description</th></tr></thead><tbody role="rowgroup" class="flow--table--body" data-rac=""><tr role="row" tabindex="-1" data-key="react-aria-7" aria-labelledby="react-aria-:R6cvfaja:-react-aria-7-react-aria-2 react-aria-:R6cvfaja:-react-aria-7-react-aria-3 react-aria-:R6cvfaja:-react-aria-7-react-aria-4 react-aria-:R6cvfaja:-react-aria-7-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-8" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-2" class="flow--table--cell" data-rac=""><code class="flow--inline-code">color</code></td><td tabindex="-1" data-key="react-aria-9" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-3" class="flow--table--cell" data-rac="">primary | accent | secondary | danger</td><td tabindex="-1" data-key="react-aria-10" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-4" class="flow--table--cell" data-rac="">primary</td><td tabindex="-1" data-key="react-aria-11" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-5" class="flow--table--cell" data-rac="">The color of the button</td></tr><tr role="row" tabindex="-1" data-key="react-aria-12" aria-labelledby="react-aria-:R6cvfaja:-react-aria-12-react-aria-2 react-aria-:R6cvfaja:-react-aria-12-react-aria-3 react-aria-:R6cvfaja:-react-aria-12-react-aria-4 react-aria-:R6cvfaja:-react-aria-12-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-13" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-2" class="flow--table--cell" data-rac=""><code class="flow--inline-code">variant</code></td><td tabindex="-1" data-key="react-aria-14" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-3" class="flow--table--cell" data-rac="">plain | solid | soft</td><td tabindex="-1" data-key="react-aria-15" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-4" class="flow--table--cell" data-rac="">solid</td><td tabindex="-1" data-key="react-aria-16" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-5" class="flow--table--cell" data-rac="">The variant of the button</td></tr><tr role="row" tabindex="-1" data-key="react-aria-17" aria-labelledby="react-aria-:R6cvfaja:-react-aria-17-react-aria-2 react-aria-:R6cvfaja:-react-aria-17-react-aria-3 react-aria-:R6cvfaja:-react-aria-17-react-aria-4 react-aria-:R6cvfaja:-react-aria-17-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-18" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-2" class="flow--table--cell" data-rac=""><code class="flow--inline-code">size</code></td><td tabindex="-1" data-key="react-aria-19" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-3" class="flow--table--cell" data-rac="">m | s</td><td tabindex="-1" data-key="react-aria-20" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-4" class="flow--table--cell" data-rac="">m</td><td tabindex="-1" data-key="react-aria-21" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-5" class="flow--table--cell" data-rac="">The size of the button</td></tr></tbody></table><span data-focus-scope-end="true" hidden=""></span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/table\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/table\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/table\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"table\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/table\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n190:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  defaul"])</script><script>self.__next_f.push([1,"t: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Table\"}],\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Table\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$18c\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$191\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/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\":\"Table\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5: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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a aria-current="page" class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></ul></nav></header><div class="layout_center__e1uqg"><div class="flow--layout-card layout_mainNavigation__zVTd_"><section class="flow--section"><h2 id=":R6ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R6ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R6mja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R16mjaH1:" class="flow--accordion--header-button" data-rac="">Actions<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R16mja:" id=":R16mjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/copy-button">CopyButton</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Ramja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1amjaH1:" class="flow--accordion--header-button" data-rac="">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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1amja:" id=":R1amjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/content/text">Text</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Remja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1emjaH1:" class="flow--accordion--header-button" data-rac="">Form controls<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1emja:" id=":R1emjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/field-react-hook-form">Field (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/form-react-hook-form">Form (React Hook Form)</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/form-controls/text-field">TextField</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rimja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1imjaH1:" class="flow--accordion--header-button" data-rac="">Navigation<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1imja:" id=":R1imjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/navigation/tabs">Tabs</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rmmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1mmjaH1:" class="flow--accordion--header-button" data-rac="">Overlays<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1mmja:" id=":R1mmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/contextual-help">ContextualHelp</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/overlays/tooltip">Tooltip</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rqmja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1qmjaH1:" class="flow--accordion--header-button" data-rac="">Status<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1qmja:" id=":R1qmjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification-provider">NotificationProvider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/notification">Notification</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/status/status-icon">StatusIcon</a></li></ul></div></div></div><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":Rumja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R1umjaH1:" class="flow--accordion--header-button" data-rac="">Structure<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-chevron-down flow--icon flow--button--icon flow--accordion--chevron flow--icon--size-m" aria-hidden="true" focusable="false" role="img"><path d="M6 9l6 6l6 -6"></path></svg></button></label><div aria-labelledby=":R1umja:" id=":R1umjaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/separator">Separator</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/fix/getting-started-typos/03-components/structure/table">Table</a></li></ul></div></div></div></ul></nav></section></div><main class="layout_main__30FUz"><div class="flow--layout-card"><div class="flow--column-layout--column-layout-container" style="--column-layout--columns-m:1fr 1fr;--column-layout--columns-l:1fr 1fr"><div class="flow--column-layout"><section class="flow--section"><h1 class="flow--heading flow--heading--h1">Table</h1>Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen<a class="flow--link" href="https://github.com/mittwald/flow/tree/main/packages/components/src/components/Table">GitHub<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-external-link flow--icon flow--link--icon flow--icon--size-s" focusable="false" role="img" aria-hidden="true"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a></section><div class="LiveCodeEditor_liveCodeEditor__fh4HJ"><div class="LiveCodeEditor_preview__2V2Kl" style="zoom:0.6"><div class="flow--table--table-container"><span data-focus-scope-start="true" hidden=""></span><table class="flow--table" data-rac="" aria-label="Button Props" id="react-aria-:R6cvfaja:" role="grid" tabindex="0" aria-describedby=""><thead role="rowgroup" class="flow--table--header"><tr role="row"><th tabindex="-1" data-key="react-aria-2" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-2" class="flow--table--column" data-rac="">Name</th><th tabindex="-1" data-key="react-aria-3" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-3" class="flow--table--column" data-rac="">Type</th><th tabindex="-1" data-key="react-aria-4" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-4" class="flow--table--column" data-rac="">Default</th><th tabindex="-1" data-key="react-aria-5" role="columnheader" id="react-aria-:R6cvfaja:-react-aria-5" class="flow--table--column" data-rac="">Description</th></tr></thead><tbody role="rowgroup" class="flow--table--body" data-rac=""><tr role="row" tabindex="-1" data-key="react-aria-7" aria-labelledby="react-aria-:R6cvfaja:-react-aria-7-react-aria-2 react-aria-:R6cvfaja:-react-aria-7-react-aria-3 react-aria-:R6cvfaja:-react-aria-7-react-aria-4 react-aria-:R6cvfaja:-react-aria-7-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-8" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-2" class="flow--table--cell" data-rac=""><code class="flow--inline-code">color</code></td><td tabindex="-1" data-key="react-aria-9" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-3" class="flow--table--cell" data-rac="">primary | accent | secondary | danger</td><td tabindex="-1" data-key="react-aria-10" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-4" class="flow--table--cell" data-rac="">primary</td><td tabindex="-1" data-key="react-aria-11" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-7-react-aria-5" class="flow--table--cell" data-rac="">The color of the button</td></tr><tr role="row" tabindex="-1" data-key="react-aria-12" aria-labelledby="react-aria-:R6cvfaja:-react-aria-12-react-aria-2 react-aria-:R6cvfaja:-react-aria-12-react-aria-3 react-aria-:R6cvfaja:-react-aria-12-react-aria-4 react-aria-:R6cvfaja:-react-aria-12-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-13" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-2" class="flow--table--cell" data-rac=""><code class="flow--inline-code">variant</code></td><td tabindex="-1" data-key="react-aria-14" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-3" class="flow--table--cell" data-rac="">plain | solid | soft</td><td tabindex="-1" data-key="react-aria-15" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-4" class="flow--table--cell" data-rac="">solid</td><td tabindex="-1" data-key="react-aria-16" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-12-react-aria-5" class="flow--table--cell" data-rac="">The variant of the button</td></tr><tr role="row" tabindex="-1" data-key="react-aria-17" aria-labelledby="react-aria-:R6cvfaja:-react-aria-17-react-aria-2 react-aria-:R6cvfaja:-react-aria-17-react-aria-3 react-aria-:R6cvfaja:-react-aria-17-react-aria-4 react-aria-:R6cvfaja:-react-aria-17-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-18" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-2" class="flow--table--cell" data-rac=""><code class="flow--inline-code">size</code></td><td tabindex="-1" data-key="react-aria-19" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-3" class="flow--table--cell" data-rac="">m | s</td><td tabindex="-1" data-key="react-aria-20" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-4" class="flow--table--cell" data-rac="">m</td><td tabindex="-1" data-key="react-aria-21" role="rowheader" id="react-aria-:R6cvfaja:-react-aria-17-react-aria-5" class="flow--table--cell" data-rac="">The size of the button</td></tr></tbody></table><span data-focus-scope-end="true" hidden=""></span></div></div></div></div></div></div><div class="flow--layout-card"><template data-react-aria-hidden="true"><div class="flow--tabs--tab-list"></div></template><div class="flow--tabs flow--layout-card--tabs" data-rac="" data-orientation="horizontal"><div class="flow--tabs--tab-list"><div id="react-aria-:R6qkvfaja:" role="tablist" aria-orientation="horizontal" class="flow--tabs--tab-list--titles" data-rac="" data-orientation="horizontal"></div></div><div class="flow--tabs--tab--tab-panel" data-rac="" inert="true" data-inert="true"></div></div></div></main></div><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[20122,[],\"\"]\n7:I[68648,[],\"\"]\n9:I[91385,[],\"\"]\nc:I[16872,[],\"\"]\n8:[\"slug\",\"03-components/structure/table\",\"c\"]\nd:[]\n0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"initialCanonicalUrl\":\"/03-components/structure/table\",\"initialTree\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/table\",\"c\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"03-components\\\",\\\"structure\\\",\\\"table\\\"]}\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"slug\",\"03-components/structure/table\",\"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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nf:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\n10:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\n11:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n12:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n13:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n26:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n27:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.j"])</script><script>self.__next_f.push([1,"s\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n29:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n2a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n2b:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n2c:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2d:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14e:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n186:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0"])</script><script>self.__next_f.push([1,".js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n187:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"LayoutCard\"]\n188:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"ColumnLayout\"]\n189:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Link\"]\n18a:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconExternalLink\"]\n18b:I[69517,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n18d:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299."])</script><script>self.__next_f.push([1,"js\"],\"Tabs\"]\n18e:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Tab\"]\n18f:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"TabTitle\"]\n14:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"16:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"17:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n18: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,"19: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,"1a:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n1b: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"])</script><script>self.__next_f.push([1,"\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;\n1c: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;\n1d:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1e:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1f:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n20:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n21:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n22:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n23:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n24: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2f:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n31:{}\n2e:{\"compiledSource\":\"$2f\",\"frontmatter\":\"$30\",\"scope\":\"$31\"}\n32:{}\n33:[\"01-get-started\",\"installation\"]\n35:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"36:{}\n37:{}\n34:{\"compiledSource\":\"$35\",\"frontmatter\":\"$36\",\"scope\":\"$37\"}\n38:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n39:[\"01-get-started\",\"stylesheet\"]\n3b:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"3c:{}\n3d:{}\n3a:{\"compiledSource\":\"$3b\",\"frontmatter\":\"$3c\",\"scope\":\"$3d\"}\n3e:{}\n3f:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n41:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n42:{}\n40:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n43:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n44:[\"03-components\",\"actions\",\"action-group\"]\n46:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n47:{}\n45:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n49:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n48:{\"confirmation\":\"$49\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n4a:[\"03-components\",\"actions\",\"action\"]\n4c:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4d:{}\n4b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"4e:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4f:[\"03-components\",\"actions\",\"button\"]\n51:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n52:{}\n50:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"53:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"54:[\"03-components\",\"actions\",\"context-menu\"]\n56:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n57:{}\n55:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n58:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n59:[\"03-components\",\"actions\",\"copy-button\"]\n5b:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5c:{}\n5a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5b\",\"scope\":\"$5c\"}\n5d:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5e:[\"03-components\",\"content\",\"avatar\"]\n60:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n61:{}\n5f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n63:[\"03-components\",\"content\",\"heading\"]\n65:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n66:{}\n64:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n68: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,"69: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,"67:{\"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\":\"$68\",\"functional\":\"$69\",\"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\\nexport default () =\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,"6a:[\"03-components\",\"content\",\"icon\"]\n6c:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6d:{}\n6b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6f:[\"03-components\",\"content\",\"illustrated-message\"]\n71:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n72:{}\n70:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\n74:[\"03-components\",\"content\",\"image\"]\n76:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n77:{}\n75:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$76\",\"scope\":\"$77\"}\n78:{\"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\"}\n79:[\"03-components\",\"content\",\"inline-code\"]\n7b:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7c:{}\n7a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$7b\",\"scope\":\"$7c\"}\n7d:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7e:[\"03-components\",\"content\",\"label\"]\n80:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n81:{}\n7f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n83:[\"03-components\",\"content\",\"labeled-value\"]\n85:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n86:{}\n84:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$85\",\"scope\":\"$86\"}\n87:{\"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\"}\n88:[\"03-components\",\"content\",\"skeleton\"]\n8a:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n8b:{}\n89:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n8d:[\"03-components\",\"content\",\"text\"]\n8f:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n90:{}\n8e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n92:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n94:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n95:{}\n93:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n96:{\"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\"}\n97:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n99:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9a:{}\n98:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\n9c:[\"03-components\",\"form-controls\",\"checkbox\"]\n9e:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9f:{}\n9d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\na1:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na3:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na4:{}\na2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na6:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na5:{\"default\":\"$a6\"}\na7:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na9:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\naa:{}\na8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a9\",\"scope\":\"$aa\"}\nab:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\nac:[\"03-components\",\"form-controls\",\"number-field\"]\nae:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\naf:{}\nad:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ae\",\"scope\":\"$af\"}\n"])</script><script>self.__next_f.push([1,"b0:{\"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,"b1:[\"03-components\",\"form-controls\",\"radio-group\"]\nb3:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb4:{}\nb2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"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\"}\nb6:[\"03-components\",\"form-controls\",\"select\"]\nb8:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb9:{}\nb7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nbb:[\"03-components\",\"form-controls\",\"slider\"]\nbd:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbe:{}\nbc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bd\",\"scope\":\"$be\"}\nbf:{\"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\"}\nc0:[\"03-components\",\"form-controls\",\"switch\"]\nc2:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc3:{}\nc1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc4:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc5:[\"03-components\",\"form-controls\",\"text-area\"]\nc7:{\"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.\"}\nc8:{}\nc6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"c9:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"ca:[\"03-components\",\"form-controls\",\"text-field\"]\ncc:{\"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.\"}\ncd:{}\ncb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cc\",\"scope\":\"$cd\"}\nce:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncf:[\"03-components\",\"navigation\",\"breadcrumb\"]\nd1:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nd2:{}\nd0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d1\",\"scope\":\"$d2\"}\nd4: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  "])</script><script>self.__next_f.push([1,"\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;\nd3:{\"contextMenu\":\"$d4\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd5:[\"03-components\",\"navigation\",\"header-navigation\"]\nd7:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd8:{}\nd6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d7\",\"scope\":\"$d8\"}\nd9:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nda:[\"03-components\",\"navigation\",\"link\"]\ndc:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\ndd:{}\ndb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$dc\",\"scope\":\"$dd\"}\n"])</script><script>self.__next_f.push([1,"de:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"df:[\"03-components\",\"navigation\",\"navigation\"]\ne1:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ne2:{}\ne0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e1\",\"scope\":\"$e2\"}\ne4: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne3:{\"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\":\"$e4\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne5:[\"03-components\",\"navigation\",\"tabs\"]\ne7:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne8:{}\ne6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$e7\",\"scope\":\"$e8\"}\ne9:{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\nea:[\"03-components\",\"overlays\",\"contextual-help\"]\nec:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ned:{}\neb:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ec\",\"scope\":\"$ed\"}\nef:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nf0:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nee:{\"default\":\"$ef\",\"offCanvas\":\"$f0\"}\nf1:[\"03-components\",\"overlays\",\"modal\"]\nf3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf6:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf5:{\"default\":\"$f6\"}\nf7:[\"03-components\",\"overlays\",\"off-canvas\"]\nf9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nfa:{}\nf8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nfc:[\"03-components\",\"overlays\",\"tooltip\"]\nfe:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nff:{}\nfd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"counter-label\"]\n103:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\"])</script><script>self.__next_f.push([1,"\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  \u003cInlin"])</script><script>self.__next_f.push([1,"eAlert 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;\n105:{\"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\":\"$106\",\"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\"}\n107:[\"03-components\",\"status\",\"inline-alert\"]\n109:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n10a:{}\n108:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference("])</script><script>self.__next_f.push([1,"id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$109\",\"scope\":\"$10a\"}\n10b:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"loading-spinner\"]\n10e:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"110:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"111:[\"03-components\",\"status\",\"notification-provider\"]\n113:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n114:{}\n112:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$113\",\"scope\":\"$114\"}\n115:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n116:[\"03-components\",\"status\",\"notification\"]\n118:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n119:{}\n117:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$118\",\"scope\":\"$119\"}\n11a:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n11b:[\"03-components\",\"status\",\"progress-bar\"]\n11d:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11e:{}\n11c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11d\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11e\"}\n11f:{\"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\"}\n120:[\"03-components\",\"status\",\"status-badge\"]\n122:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n123:{}\n121:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$122\",\"scope\":\"$123\"}\n124:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n125:[\"03-components\",\"status\",\"status-icon\"]\n127:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n128:{}\n126:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$127\",\"scope\":\"$128\"}\n129:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n12a:[\"03-components\",\"structure\",\"accordion\"]\n12c:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12d:{}\n12b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12c\",\"scope\":\"$12d\"}\n12e:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12f:[\"03-components\",\"structure\",\"column-layout\"]\n131:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n132:{}\n130:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$131\",\"scope\":\"$132\"}\n133:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n134:[\"03-components\",\"structure\",\"layout-card\"]\n136:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n137:{}\n135:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$136\",\"scope\":\"$137\"}\n139:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13a:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n13b:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:{\"default\":\"$139\",\"main\":\"$13a\",\"withLink\":\"$13b\"}\n13c:[\"03-components\",\"structure\",\"list\"]\n13e:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13f:{}\n13d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13e\",\"scope\":\"$13f\"}\n141: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;\n140:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$141\",\"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\"}\n142:[\"03-components\",\"structure\",\"section\"]\n144:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n145:{}\n143:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$144\",\"scope\":\"$145\"}\n146:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n147:[\"03-components\",\"structure\",\"separator\"]\n149:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n14a:{}\n148:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$149\",\"scope\":\"$14a\"}\n14c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n14b:{\"default\":\"$14c\"}\n14d:[\"03-components\",\"structure\",\"table\"]\n150:{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"}\n151:{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n152:{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n153:{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n154:{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"}\n155:{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"}\n156:{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n157:{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n158:{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n159:{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"}\n15a:{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"}\n15b:{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n15c:{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"}\n15d:{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15e:{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"}\n15f:{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n160:{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n161:{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"}\n162:{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n163:{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n164:{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n165:{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n166:{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n167:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n168:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n169:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n16a:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n16b:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n16c:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16d:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16e:{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16f:{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n170:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n171:{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n172:{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n173:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n174:{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n175:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n176:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n177:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n178:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n179:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n17a:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n17b:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notificat"])</script><script>self.__next_f.push([1,"ion/index.mdx\"}\n17c:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17d:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17e:{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17f:{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n180:{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n181:{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n182:{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"}\n183:{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"}\n184:{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n185:{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14f:[\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\",\"$183\",\"$184\",\"$185\"]\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\":[\"$\",\"$Lf\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$L10\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L11\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L13\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$16\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"functional\":\"$19\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$1a\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"offCanvas\":\"$1e\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1f\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$21\",\"main\":\"$22\",\"withLink\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$24\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$25\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L26\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L27\",null,{\"children\":[\"$\",\"$L28\",null,{\"children\":[[\"$\",\"$L29\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2a\",null,{}]}],[\"$\",\"$L2b\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2c\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L13\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14e\",null,{\"docs\":\"$14f\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L186\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14e\",null,{\"docs\":[{\"mdxSource\":\"$2e\",\"examples\":\"$32\",\"slugs\":\"$33\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$34\",\"examples\":\"$38\",\"slugs\":\"$39\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3a\",\"examples\":\"$3e\",\"slugs\":\"$3f\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$40\",\"examples\":\"$43\",\"slugs\":\"$44\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$45\",\"examples\":\"$48\",\"slugs\":\"$4a\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4b\",\"examples\":\"$4e\",\"slugs\":\"$4f\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$50\",\"examples\":\"$53\",\"slugs\":\"$54\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$55\",\"examples\":\"$58\",\"slugs\":\"$59\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5a\",\"examples\":\"$5d\",\"slugs\":\"$5e\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5f\",\"examples\":\"$62\",\"slugs\":\"$63\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$64\",\"examples\":\"$67\",\"slugs\":\"$6a\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6b\",\"examples\":\"$6e\",\"slugs\":\"$6f\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$70\",\"examples\":\"$73\",\"slugs\":\"$74\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$75\",\"examples\":\"$78\",\"slugs\":\"$79\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7a\",\"examples\":\"$7d\",\"slugs\":\"$7e\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7f\",\"examples\":\"$82\",\"slugs\":\"$83\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$84\",\"examples\":\"$87\",\"slugs\":\"$88\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$89\",\"examples\":\"$8c\",\"slugs\":\"$8d\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8e\",\"examples\":\"$91\",\"slugs\":\"$92\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$93\",\"examples\":\"$96\",\"slugs\":\"$97\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$98\",\"examples\":\"$9b\",\"slugs\":\"$9c\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9d\",\"examples\":\"$a0\",\"slugs\":\"$a1\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a2\",\"examples\":\"$a5\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$ca\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$cb\",\"examples\":\"$ce\",\"slugs\":\"$cf\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$d0\",\"examples\":\"$d3\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$da\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$db\",\"examples\":\"$de\",\"slugs\":\"$df\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$e0\",\"examples\":\"$e3\",\"slugs\":\"$e5\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$ea\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$eb\",\"examples\":\"$ee\",\"slugs\":\"$f1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$107\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$120\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$121\",\"examples\":\"$124\",\"slugs\":\"$125\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$126\",\"examples\":\"$129\",\"slugs\":\"$12a\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$12b\",\"examples\":\"$12e\",\"slugs\":\"$12f\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$130\",\"examples\":\"$133\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$135\",\"examples\":\"$138\",\"slugs\":\"$13c\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13d\",\"examples\":\"$140\",\"slugs\":\"$142\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$143\",\"examples\":\"$146\",\"slugs\":\"$147\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$148\",\"examples\":\"$14b\",\"slugs\":\"$14d\",\"filename\":\"03-components/structure/table/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,"18c:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n190:T405,\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  defaul"])</script><script>self.__next_f.push([1,"t: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n191:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L188\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2d\",null,{\"children\":[[\"$\",\"$L11\",null,{\"level\":1,\"children\":\"Table\"}],\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\",[\"$\",\"$L189\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Table\",\"children\":[\"GitHub\",[\"$\",\"$L18a\",null,{}]]}]]}],[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$18c\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}}]]}]}],[\"$\",\"$L187\",null,{\"children\":[\"$\",\"$L18d\",null,{\"children\":[[\"$\",\"$L18e\",null,{\"children\":[[\"$\",\"$L18f\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$L18b\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$190\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$191\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/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\":\"Table\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/03-components/structure/table.txt b/docs/fix/getting-started-typos/03-components/structure/table.txt
index 3454404e9d..b8fdef442b 100644
--- a/docs/fix/getting-started-typos/03-components/structure/table.txt
+++ b/docs/fix/getting-started-typos/03-components/structure/table.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/table","c"]
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":[["slug","03-components/structure/table","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"table\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/structure/table","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":[["slug","03-components/structure/table","c"],{"children":["__PAGE__?{\"slug\":[\"03-components\",\"structure\",\"table\"]}",{}]}]},"$undefined","$undefined",true],["",{"children":[["slug","03-components/structure/table","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/fix/getting-started-typos/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 9:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
 a:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","31","static/chunks/31-60a27d528d24ff6b.js","275","static/chunks/275-c070d0d00f53bea8.js","734","static/chunks/734-1ddf77695347dca0.js","877","static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js"],"IconMittwald"]
@@ -143,7 +143,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1410,7 +1410,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
diff --git a/docs/fix/getting-started-typos/404.html b/docs/fix/getting-started-typos/404.html
index 8516cd7335..7626f129a4 100644
--- a/docs/fix/getting-started-typos/404.html
+++ b/docs/fix/getting-started-typos/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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/31-60a27d528d24ff6b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/734-1ddf77695347dca0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/layout-8c08f2580031bd75.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/275-c070d0d00f53bea8.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js" async=""></script><title>404: This page could not be found.</title><title>Flow – mittwald Design System</title><script src="/flow-previews/docs/fix/getting-started-typos/_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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nc:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\nd:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\ne:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\nf:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n10:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n23:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n24:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n25:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\","])</script><script>self.__next_f.push([1,"\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n26:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n27:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n29:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2a:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14b:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n183:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js"])</script><script>self.__next_f.push([1,"\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n11:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"13:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n15: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,"16: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,"17:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n18: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"])</script><script>self.__next_f.push([1,"\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        \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:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1b:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1c:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\n22:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2c:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2e:{}\n2b:{\"compiledSource\":\"$2c\",\"frontmatter\":\"$2d\",\"scope\":\"$2e\"}\n2f:{}\n30:[\"01-get-started\",\"installation\"]\n32:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"33:{}\n34:{}\n31:{\"compiledSource\":\"$32\",\"frontmatter\":\"$33\",\"scope\":\"$34\"}\n35:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n36:[\"01-get-started\",\"stylesheet\"]\n38:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"39:{}\n3a:{}\n37:{\"compiledSource\":\"$38\",\"frontmatter\":\"$39\",\"scope\":\"$3a\"}\n3b:{}\n3c:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n3e:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3f:{}\n3d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3e\",\"scope\":\"$3f\"}\n40:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n41:[\"03-components\",\"actions\",\"action-group\"]\n43:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n44:{}\n42:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$43\",\"scope\":\"$44\"}\n46:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n45:{\"confirmation\":\"$46\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n47:[\"03-components\",\"actions\",\"action\"]\n49:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4a:{}\n48:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$49\",\"scope\":\"$4a\"}\n"])</script><script>self.__next_f.push([1,"4b:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4c:[\"03-components\",\"actions\",\"button\"]\n4e:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n4f:{}\n4d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4e\",\"scope\":\"$4f\"}\n"])</script><script>self.__next_f.push([1,"50:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"51:[\"03-components\",\"actions\",\"context-menu\"]\n53:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n54:{}\n52:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$53\",\"scope\":\"$54\"}\n55:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n56:[\"03-components\",\"actions\",\"copy-button\"]\n58:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n59:{}\n57:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$58\",\"scope\":\"$59\"}\n5a:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5b:[\"03-components\",\"content\",\"avatar\"]\n5d:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n5e:{}\n5c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n60:[\"03-components\",\"content\",\"heading\"]\n62:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n63:{}\n61:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n65: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,"66: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,"64:{\"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\":\"$65\",\"functional\":\"$66\",\"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\\nexport default () =\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,"67:[\"03-components\",\"content\",\"icon\"]\n69:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6a:{}\n68:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$69\",\"scope\":\"$6a\"}\n6b:{\"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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6c:[\"03-components\",\"content\",\"illustrated-message\"]\n6e:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n6f:{}\n6d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6e\",\"scope\":\"$6f\"}\n70:{\"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\"}\n71:[\"03-components\",\"content\",\"image\"]\n73:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n74:{}\n72:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$73\",\"scope\":\"$74\"}\n75:{\"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\"}\n76:[\"03-components\",\"content\",\"inline-code\"]\n78:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n79:{}\n77:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$78\",\"scope\":\"$79\"}\n7a:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7b:[\"03-components\",\"content\",\"label\"]\n7d:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n7e:{}\n7c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7d\",\"scope\":\"$7e\"}\n7f:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n80:[\"03-components\",\"content\",\"labeled-value\"]\n82:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n83:{}\n81:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$82\",\"scope\":\"$83\"}\n84:{\"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\"}\n85:[\"03-components\",\"content\",\"skeleton\"]\n87:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n88:{}\n86:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$87\",\"scope\":\"$88\"}\n89:{\"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\"}\n8a:[\"03-components\",\"content\",\"text\"]\n8c:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n8d:{}\n8b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8c\",\"scope\":\"$8d\"}\n8e:{\"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\"}\n8f:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n91:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n92:{}\n90:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$91\",\"scope\":\"$92\"}\n93:{\"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\"}\n94:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n96:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n97:{}\n95:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$96\",\"scope\":\"$97\"}\n98:{\"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\"}\n99:[\"03-components\",\"form-controls\",\"checkbox\"]\n9b:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9c:{}\n9a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9b\",\"scope\":\"$9c\"}\n9d:{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\n9e:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na0:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na1:{}\n9f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a0\",\"scope\":\"$a1\"}\na3:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na2:{\"default\":\"$a3\"}\na4:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na6:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\na7:{}\na5:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\na9:[\"03-components\",\"form-controls\",\"number-field\"]\nab:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\nac:{}\naa:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"ad:{\"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,"ae:[\"03-components\",\"form-controls\",\"radio-group\"]\nb0:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb1:{}\naf:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\nb3:[\"03-components\",\"form-controls\",\"select\"]\nb5:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb6:{}\nb4:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nb7:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nb8:[\"03-components\",\"form-controls\",\"slider\"]\nba:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbb:{}\nb9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ba\",\"scope\":\"$bb\"}\nbc:{\"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\"}\nbd:[\"03-components\",\"form-controls\",\"switch\"]\nbf:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc0:{}\nbe:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bf\",\"scope\":\"$c0\"}\nc1:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc2:[\"03-components\",\"form-controls\",\"text-area\"]\nc4:{\"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.\"}\nc5:{}\nc3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c4\",\"scope\":\"$c5\"}\n"])</script><script>self.__next_f.push([1,"c6:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c7:[\"03-components\",\"form-controls\",\"text-field\"]\nc9:{\"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.\"}\nca:{}\nc8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c9\",\"scope\":\"$ca\"}\ncb:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncc:[\"03-components\",\"navigation\",\"breadcrumb\"]\nce:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\ncf:{}\ncd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  "])</script><script>self.__next_f.push([1,"\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;\nd0:{\"contextMenu\":\"$d1\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd2:[\"03-components\",\"navigation\",\"header-navigation\"]\nd4:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd5:{}\nd3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nd7:[\"03-components\",\"navigation\",\"link\"]\nd9:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nda:{}\nd8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"db:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"dc:[\"03-components\",\"navigation\",\"navigation\"]\nde:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ndf:{}\ndd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$de\",\"scope\":\"$df\"}\ne1: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne0:{\"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\":\"$e1\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne2:[\"03-components\",\"navigation\",\"tabs\"]\ne4:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne5:{}\ne3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\ne7:[\"03-components\",\"overlays\",\"contextual-help\"]\ne9:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\nea:{}\ne8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nec:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ned:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\neb:{\"default\":\"$ec\",\"offCanvas\":\"$ed\"}\nee:[\"03-components\",\"overlays\",\"modal\"]\nf0:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf1:{}\nef:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f0\",\"scope\":\"$f1\"}\nf3:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf2:{\"default\":\"$f3\"}\nf4:[\"03-components\",\"overlays\",\"off-canvas\"]\nf6:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nf7:{}\nf5:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f6\",\"scope\":\"$f7\"}\nf8:{\"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\"}\nf9:[\"03-components\",\"overlays\",\"tooltip\"]\nfb:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nfc:{}\nfa:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fb\",\"scope\":\"$fc\"}\nfd:{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\nfe:[\"03-components\",\"status\",\"counter-label\"]\n100:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n101:{}\nff:{\"compiledSource\":\"\\\"use strict\\\";\\"])</script><script>self.__next_f.push([1,"nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$100\",\"scope\":\"$101\"}\n103: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  \u003cInlineAl"])</script><script>self.__next_f.push([1,"ert 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;\n102:{\"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\":\"$103\",\"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\"}\n104:[\"03-components\",\"status\",\"inline-alert\"]\n106:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n107:{}\n105:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id,"])</script><script>self.__next_f.push([1," component) {\\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\"}\n108:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n109:[\"03-components\",\"status\",\"loading-spinner\"]\n10b:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10c:{}\n10a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"10d:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"10e:[\"03-components\",\"status\",\"notification-provider\"]\n110:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n111:{}\n10f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$110\",\"scope\":\"$111\"}\n112:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n113:[\"03-components\",\"status\",\"notification\"]\n115:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n116:{}\n114:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$115\",\"scope\":\"$116\"}\n117:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n118:[\"03-components\",\"status\",\"progress-bar\"]\n11a:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11b:{}\n119:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11a\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11b\"}\n11c:{\"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\"}\n11d:[\"03-components\",\"status\",\"status-badge\"]\n11f:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n120:{}\n11e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11f\",\"scope\":\"$120\"}\n121:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n122:[\"03-components\",\"status\",\"status-icon\"]\n124:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n125:{}\n123:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$124\",\"scope\":\"$125\"}\n126:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n127:[\"03-components\",\"structure\",\"accordion\"]\n129:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12a:{}\n128:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$129\",\"scope\":\"$12a\"}\n12b:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12c:[\"03-components\",\"structure\",\"column-layout\"]\n12e:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n12f:{}\n12d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12e\",\"scope\":\"$12f\"}\n130:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"layout-card\"]\n133:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n134:{}\n132:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$133\",\"scope\":\"$134\"}\n136:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n137:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n135:{\"default\":\"$136\",\"main\":\"$137\",\"withLink\":\"$138\"}\n139:[\"03-components\",\"structure\",\"list\"]\n13b:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13c:{}\n13a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13b\",\"scope\":\"$13c\"}\n13e: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;\n13d:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$13e\",\"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\"}\n13f:[\"03-components\",\"structure\",\"section\"]\n141:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n142:{}\n140:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$141\",\"scope\":\"$142\"}\n143:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n144:[\"03-components\",\"structure\",\"separator\"]\n146:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n147:{}\n145:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$146\",\"scope\":\"$147\"}\n149:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n148:{\"default\":\"$149\"}\n14a:[\"03-components\",\"structure\",\"table\"]\n14d:{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"}\n14e:{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n14f:{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n150:{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n151:{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"}\n152:{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"}\n153:{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n154:{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n155:{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n156:{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"}\n157:{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/index.mdx\"}\n158:{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n159:{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"}\n15a:{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15b:{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"}\n15c:{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n15d:{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n15e:{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"}\n15f:{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n160:{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n161:{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n162:{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n163:{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n164:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n165:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n166:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n167:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n168:{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n169:{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16a:{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c7\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16b:{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16c:{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n16d:{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n16e:{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dc\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n16f:{\"mdxSource\":\"$dd\",\"examples\":\"$e0\",\"slugs\":\"$e2\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n170:{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n171:{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ee\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n172:{\"mdxSource\":\"$ef\",\"examples\":\"$f2\",\"slugs\":\"$f4\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n173:{\"mdxSource\":\"$f5\",\"examples\":\"$f8\",\"slugs\":\"$f9\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n174:{\"mdxSource\":\"$fa\",\"examples\":\"$fd\",\"slugs\":\"$fe\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n175:{\"mdxSource\":\"$ff\",\"examples\":\"$102\",\"slugs\":\"$104\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n176:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$109\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n177:{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10e\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n178:{\"mdxSource\":\"$10f\",\"examples\":\"$112\",\"slugs\":\"$113\",\"filename\":\"03-components/status/notification"])</script><script>self.__next_f.push([1,"/index.mdx\"}\n179:{\"mdxSource\":\"$114\",\"examples\":\"$117\",\"slugs\":\"$118\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17a:{\"mdxSource\":\"$119\",\"examples\":\"$11c\",\"slugs\":\"$11d\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17b:{\"mdxSource\":\"$11e\",\"examples\":\"$121\",\"slugs\":\"$122\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17c:{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$127\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n17d:{\"mdxSource\":\"$128\",\"examples\":\"$12b\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n17e:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n17f:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$139\",\"filename\":\"03-components/structure/list/index.mdx\"}\n180:{\"mdxSource\":\"$13a\",\"examples\":\"$13d\",\"slugs\":\"$13f\",\"filename\":\"03-components/structure/section/index.mdx\"}\n181:{\"mdxSource\":\"$140\",\"examples\":\"$143\",\"slugs\":\"$144\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n182:{\"mdxSource\":\"$145\",\"examples\":\"$148\",\"slugs\":\"$14a\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14c:[\"$14d\",\"$14e\",\"$14f\",\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\"]\n184:{\"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\"}\n185:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n186:{\"display\":\"inline-block\"}\n187:{\"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\":[\"$\",\"$Lc\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Ld\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Le\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Lf\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L10\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$11\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$12\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$14\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$15\",\"functional\":\"$16\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$17\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$22\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L23\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L24\",null,{\"children\":[\"$\",\"$L25\",null,{\"children\":[[\"$\",\"$L26\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L27\",null,{}]}],[\"$\",\"$L28\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L29\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2a\",null,{\"children\":[[\"$\",\"$L10\",null,{\"docs\":[{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c7\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dc\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dd\",\"examples\":\"$e0\",\"slugs\":\"$e2\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ee\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ef\",\"examples\":\"$f2\",\"slugs\":\"$f4\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f5\",\"examples\":\"$f8\",\"slugs\":\"$f9\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fa\",\"examples\":\"$fd\",\"slugs\":\"$fe\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$ff\",\"examples\":\"$102\",\"slugs\":\"$104\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$109\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10e\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10f\",\"examples\":\"$112\",\"slugs\":\"$113\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$114\",\"examples\":\"$117\",\"slugs\":\"$118\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$119\",\"examples\":\"$11c\",\"slugs\":\"$11d\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11e\",\"examples\":\"$121\",\"slugs\":\"$122\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$127\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$128\",\"examples\":\"$12b\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$139\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13a\",\"examples\":\"$13d\",\"slugs\":\"$13f\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$140\",\"examples\":\"$143\",\"slugs\":\"$144\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$145\",\"examples\":\"$148\",\"slugs\":\"$14a\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14b\",null,{\"docs\":\"$14c\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L183\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14b\",null,{\"docs\":[{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c7\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dc\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dd\",\"examples\":\"$e0\",\"slugs\":\"$e2\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ee\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ef\",\"examples\":\"$f2\",\"slugs\":\"$f4\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f5\",\"examples\":\"$f8\",\"slugs\":\"$f9\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fa\",\"examples\":\"$fd\",\"slugs\":\"$fe\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$ff\",\"examples\":\"$102\",\"slugs\":\"$104\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$109\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10e\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10f\",\"examples\":\"$112\",\"slugs\":\"$113\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$114\",\"examples\":\"$117\",\"slugs\":\"$118\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$119\",\"examples\":\"$11c\",\"slugs\":\"$11d\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11e\",\"examples\":\"$121\",\"slugs\":\"$122\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$127\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$128\",\"examples\":\"$12b\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$139\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13a\",\"examples\":\"$13d\",\"slugs\":\"$13f\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$140\",\"examples\":\"$143\",\"slugs\":\"$144\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$145\",\"examples\":\"$148\",\"slugs\":\"$14a\",\"filename\":\"03-components/structure/table/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\":\"$184\",\"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\":\"$185\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$186\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$187\",\"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/fix/getting-started-typos/01-get-started/installation"><span class="flow--emulated-bold-text">Get started<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Get started</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/02-foundations/content-guidelines/fehlermeldungen"><span class="flow--emulated-bold-text">Foundations<span aria-hidden="true" class="flow--emulated-bold-text--bold-text">Foundations</span></span></a></li><li><a class="flow--header-navigation--link" href="/flow-previews/docs/fix/getting-started-typos/03-components/actions/action-group"><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><div><button type="button" aria-expanded="false" id="react-aria-:RljaH1:" 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></div></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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"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\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nc:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\nd:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\ne:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\nf:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n10:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n23:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n24:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n25:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\","])</script><script>self.__next_f.push([1,"\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n26:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n27:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n29:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n2a:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14b:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n183:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js"])</script><script>self.__next_f.push([1,"\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n11:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"13:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n15: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,"16: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,"17:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n18: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"])</script><script>self.__next_f.push([1,"\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        \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:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1b:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1c:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n1d:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\n22:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2c:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2e:{}\n2b:{\"compiledSource\":\"$2c\",\"frontmatter\":\"$2d\",\"scope\":\"$2e\"}\n2f:{}\n30:[\"01-get-started\",\"installation\"]\n32:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"33:{}\n34:{}\n31:{\"compiledSource\":\"$32\",\"frontmatter\":\"$33\",\"scope\":\"$34\"}\n35:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n36:[\"01-get-started\",\"stylesheet\"]\n38:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"39:{}\n3a:{}\n37:{\"compiledSource\":\"$38\",\"frontmatter\":\"$39\",\"scope\":\"$3a\"}\n3b:{}\n3c:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n3e:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3f:{}\n3d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3e\",\"scope\":\"$3f\"}\n40:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n41:[\"03-components\",\"actions\",\"action-group\"]\n43:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n44:{}\n42:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$43\",\"scope\":\"$44\"}\n46:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n45:{\"confirmation\":\"$46\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n47:[\"03-components\",\"actions\",\"action\"]\n49:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4a:{}\n48:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$49\",\"scope\":\"$4a\"}\n"])</script><script>self.__next_f.push([1,"4b:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4c:[\"03-components\",\"actions\",\"button\"]\n4e:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n4f:{}\n4d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4e\",\"scope\":\"$4f\"}\n"])</script><script>self.__next_f.push([1,"50:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"51:[\"03-components\",\"actions\",\"context-menu\"]\n53:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n54:{}\n52:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$53\",\"scope\":\"$54\"}\n55:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n56:[\"03-components\",\"actions\",\"copy-button\"]\n58:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n59:{}\n57:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$58\",\"scope\":\"$59\"}\n5a:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5b:[\"03-components\",\"content\",\"avatar\"]\n5d:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n5e:{}\n5c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n60:[\"03-components\",\"content\",\"heading\"]\n62:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n63:{}\n61:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n65: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,"66: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,"64:{\"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\":\"$65\",\"functional\":\"$66\",\"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\\nexport default () =\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,"67:[\"03-components\",\"content\",\"icon\"]\n69:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6a:{}\n68:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$69\",\"scope\":\"$6a\"}\n6b:{\"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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6c:[\"03-components\",\"content\",\"illustrated-message\"]\n6e:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n6f:{}\n6d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6e\",\"scope\":\"$6f\"}\n70:{\"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\"}\n71:[\"03-components\",\"content\",\"image\"]\n73:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n74:{}\n72:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$73\",\"scope\":\"$74\"}\n75:{\"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\"}\n76:[\"03-components\",\"content\",\"inline-code\"]\n78:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n79:{}\n77:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$78\",\"scope\":\"$79\"}\n7a:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7b:[\"03-components\",\"content\",\"label\"]\n7d:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n7e:{}\n7c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7d\",\"scope\":\"$7e\"}\n7f:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n80:[\"03-components\",\"content\",\"labeled-value\"]\n82:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n83:{}\n81:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$82\",\"scope\":\"$83\"}\n84:{\"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\"}\n85:[\"03-components\",\"content\",\"skeleton\"]\n87:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n88:{}\n86:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$87\",\"scope\":\"$88\"}\n89:{\"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\"}\n8a:[\"03-components\",\"content\",\"text\"]\n8c:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n8d:{}\n8b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8c\",\"scope\":\"$8d\"}\n8e:{\"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\"}\n8f:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n91:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n92:{}\n90:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$91\",\"scope\":\"$92\"}\n93:{\"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\"}\n94:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n96:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n97:{}\n95:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$96\",\"scope\":\"$97\"}\n98:{\"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\"}\n99:[\"03-components\",\"form-controls\",\"checkbox\"]\n9b:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9c:{}\n9a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9b\",\"scope\":\"$9c\"}\n9d:{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\n9e:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\na0:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na1:{}\n9f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a0\",\"scope\":\"$a1\"}\na3:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na2:{\"default\":\"$a3\"}\na4:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na6:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\na7:{}\na5:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\na9:[\"03-components\",\"form-controls\",\"number-field\"]\nab:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\nac:{}\naa:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"ad:{\"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,"ae:[\"03-components\",\"form-controls\",\"radio-group\"]\nb0:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb1:{}\naf:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 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\"}\nb3:[\"03-components\",\"form-controls\",\"select\"]\nb5:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb6:{}\nb4:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nb7:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nb8:[\"03-components\",\"form-controls\",\"slider\"]\nba:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nbb:{}\nb9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ba\",\"scope\":\"$bb\"}\nbc:{\"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\"}\nbd:[\"03-components\",\"form-controls\",\"switch\"]\nbf:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nc0:{}\nbe:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$bf\",\"scope\":\"$c0\"}\nc1:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc2:[\"03-components\",\"form-controls\",\"text-area\"]\nc4:{\"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.\"}\nc5:{}\nc3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c4\",\"scope\":\"$c5\"}\n"])</script><script>self.__next_f.push([1,"c6:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c7:[\"03-components\",\"form-controls\",\"text-field\"]\nc9:{\"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.\"}\nca:{}\nc8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c9\",\"scope\":\"$ca\"}\ncb:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncc:[\"03-components\",\"navigation\",\"breadcrumb\"]\nce:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\ncf:{}\ncd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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  "])</script><script>self.__next_f.push([1,"\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;\nd0:{\"contextMenu\":\"$d1\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd2:[\"03-components\",\"navigation\",\"header-navigation\"]\nd4:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd5:{}\nd3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nd7:[\"03-components\",\"navigation\",\"link\"]\nd9:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nda:{}\nd8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"db:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"dc:[\"03-components\",\"navigation\",\"navigation\"]\nde:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\ndf:{}\ndd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$de\",\"scope\":\"$df\"}\ne1: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ne0:{\"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\":\"$e1\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne2:[\"03-components\",\"navigation\",\"tabs\"]\ne4:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne5:{}\ne3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\ne7:[\"03-components\",\"overlays\",\"contextual-help\"]\ne9:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\nea:{}\ne8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nec:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ned:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\neb:{\"default\":\"$ec\",\"offCanvas\":\"$ed\"}\nee:[\"03-components\",\"overlays\",\"modal\"]\nf0:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf1:{}\nef:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f0\",\"scope\":\"$f1\"}\nf3:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf2:{\"default\":\"$f3\"}\nf4:[\"03-components\",\"overlays\",\"off-canvas\"]\nf6:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nf7:{}\nf5:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f6\",\"scope\":\"$f7\"}\nf8:{\"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\"}\nf9:[\"03-components\",\"overlays\",\"tooltip\"]\nfb:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nfc:{}\nfa:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fb\",\"scope\":\"$fc\"}\nfd:{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\nfe:[\"03-components\",\"status\",\"counter-label\"]\n100:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n101:{}\nff:{\"compiledSource\":\"\\\"use strict\\\";\\"])</script><script>self.__next_f.push([1,"nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$100\",\"scope\":\"$101\"}\n103: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  \u003cInlineAl"])</script><script>self.__next_f.push([1,"ert 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;\n102:{\"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\":\"$103\",\"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\"}\n104:[\"03-components\",\"status\",\"inline-alert\"]\n106:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n107:{}\n105:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id,"])</script><script>self.__next_f.push([1," component) {\\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\"}\n108:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n109:[\"03-components\",\"status\",\"loading-spinner\"]\n10b:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10c:{}\n10a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"10d:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"10e:[\"03-components\",\"status\",\"notification-provider\"]\n110:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n111:{}\n10f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$110\",\"scope\":\"$111\"}\n112:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n113:[\"03-components\",\"status\",\"notification\"]\n115:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n116:{}\n114:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$115\",\"scope\":\"$116\"}\n117:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n118:[\"03-components\",\"status\",\"progress-bar\"]\n11a:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11b:{}\n119:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11a\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11b\"}\n11c:{\"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\"}\n11d:[\"03-components\",\"status\",\"status-badge\"]\n11f:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n120:{}\n11e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11f\",\"scope\":\"$120\"}\n121:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n122:[\"03-components\",\"status\",\"status-icon\"]\n124:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n125:{}\n123:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$124\",\"scope\":\"$125\"}\n126:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n127:[\"03-components\",\"structure\",\"accordion\"]\n129:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n12a:{}\n128:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$129\",\"scope\":\"$12a\"}\n12b:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12c:[\"03-components\",\"structure\",\"column-layout\"]\n12e:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n12f:{}\n12d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12e\",\"scope\":\"$12f\"}\n130:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"layout-card\"]\n133:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n134:{}\n132:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$133\",\"scope\":\"$134\"}\n136:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n137:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n138:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n135:{\"default\":\"$136\",\"main\":\"$137\",\"withLink\":\"$138\"}\n139:[\"03-components\",\"structure\",\"list\"]\n13b:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13c:{}\n13a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13b\",\"scope\":\"$13c\"}\n13e: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;\n13d:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$13e\",\"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\"}\n13f:[\"03-components\",\"structure\",\"section\"]\n141:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n142:{}\n140:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$141\",\"scope\":\"$142\"}\n143:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n144:[\"03-components\",\"structure\",\"separator\"]\n146:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n147:{}\n145:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$146\",\"scope\":\"$147\"}\n149:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n148:{\"default\":\"$149\"}\n14a:[\"03-components\",\"structure\",\"table\"]\n14d:{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"}\n14e:{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n14f:{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n150:{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n151:{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"}\n152:{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"}\n153:{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n154:{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n155:{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n156:{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"}\n157:{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/index.mdx\"}\n158:{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n159:{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"}\n15a:{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15b:{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"}\n15c:{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n15d:{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n15e:{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"}\n15f:{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n160:{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n161:{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n162:{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n163:{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n164:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n165:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n166:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n167:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n168:{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n169:{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n16a:{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c7\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16b:{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16c:{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n16d:{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n16e:{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dc\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n16f:{\"mdxSource\":\"$dd\",\"examples\":\"$e0\",\"slugs\":\"$e2\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n170:{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n171:{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ee\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n172:{\"mdxSource\":\"$ef\",\"examples\":\"$f2\",\"slugs\":\"$f4\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n173:{\"mdxSource\":\"$f5\",\"examples\":\"$f8\",\"slugs\":\"$f9\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n174:{\"mdxSource\":\"$fa\",\"examples\":\"$fd\",\"slugs\":\"$fe\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n175:{\"mdxSource\":\"$ff\",\"examples\":\"$102\",\"slugs\":\"$104\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n176:{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$109\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n177:{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10e\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n178:{\"mdxSource\":\"$10f\",\"examples\":\"$112\",\"slugs\":\"$113\",\"filename\":\"03-components/status/notification"])</script><script>self.__next_f.push([1,"/index.mdx\"}\n179:{\"mdxSource\":\"$114\",\"examples\":\"$117\",\"slugs\":\"$118\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n17a:{\"mdxSource\":\"$119\",\"examples\":\"$11c\",\"slugs\":\"$11d\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17b:{\"mdxSource\":\"$11e\",\"examples\":\"$121\",\"slugs\":\"$122\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17c:{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$127\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n17d:{\"mdxSource\":\"$128\",\"examples\":\"$12b\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n17e:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n17f:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$139\",\"filename\":\"03-components/structure/list/index.mdx\"}\n180:{\"mdxSource\":\"$13a\",\"examples\":\"$13d\",\"slugs\":\"$13f\",\"filename\":\"03-components/structure/section/index.mdx\"}\n181:{\"mdxSource\":\"$140\",\"examples\":\"$143\",\"slugs\":\"$144\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n182:{\"mdxSource\":\"$145\",\"examples\":\"$148\",\"slugs\":\"$14a\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14c:[\"$14d\",\"$14e\",\"$14f\",\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\",\"$182\"]\n184:{\"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\"}\n185:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n186:{\"display\":\"inline-block\"}\n187:{\"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\":[\"$\",\"$Lc\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Ld\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Le\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Lf\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L10\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$11\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$12\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$14\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$15\",\"functional\":\"$16\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$17\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$22\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L23\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L24\",null,{\"children\":[\"$\",\"$L25\",null,{\"children\":[[\"$\",\"$L26\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L27\",null,{}]}],[\"$\",\"$L28\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L29\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2a\",null,{\"children\":[[\"$\",\"$L10\",null,{\"docs\":[{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c7\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dc\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dd\",\"examples\":\"$e0\",\"slugs\":\"$e2\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ee\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ef\",\"examples\":\"$f2\",\"slugs\":\"$f4\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f5\",\"examples\":\"$f8\",\"slugs\":\"$f9\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fa\",\"examples\":\"$fd\",\"slugs\":\"$fe\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$ff\",\"examples\":\"$102\",\"slugs\":\"$104\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$109\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10e\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10f\",\"examples\":\"$112\",\"slugs\":\"$113\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$114\",\"examples\":\"$117\",\"slugs\":\"$118\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$119\",\"examples\":\"$11c\",\"slugs\":\"$11d\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11e\",\"examples\":\"$121\",\"slugs\":\"$122\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$127\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$128\",\"examples\":\"$12b\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$139\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13a\",\"examples\":\"$13d\",\"slugs\":\"$13f\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$140\",\"examples\":\"$143\",\"slugs\":\"$144\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$145\",\"examples\":\"$148\",\"slugs\":\"$14a\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14b\",null,{\"docs\":\"$14c\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L183\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14b\",null,{\"docs\":[{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c7\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$dc\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dd\",\"examples\":\"$e0\",\"slugs\":\"$e2\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ee\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ef\",\"examples\":\"$f2\",\"slugs\":\"$f4\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f5\",\"examples\":\"$f8\",\"slugs\":\"$f9\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$fa\",\"examples\":\"$fd\",\"slugs\":\"$fe\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$ff\",\"examples\":\"$102\",\"slugs\":\"$104\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$105\",\"examples\":\"$108\",\"slugs\":\"$109\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$10a\",\"examples\":\"$10d\",\"slugs\":\"$10e\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10f\",\"examples\":\"$112\",\"slugs\":\"$113\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$114\",\"examples\":\"$117\",\"slugs\":\"$118\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$119\",\"examples\":\"$11c\",\"slugs\":\"$11d\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11e\",\"examples\":\"$121\",\"slugs\":\"$122\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$127\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$128\",\"examples\":\"$12b\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$139\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$13a\",\"examples\":\"$13d\",\"slugs\":\"$13f\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$140\",\"examples\":\"$143\",\"slugs\":\"$144\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$145\",\"examples\":\"$148\",\"slugs\":\"$14a\",\"filename\":\"03-components/structure/table/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\":\"$184\",\"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\":\"$185\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$186\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$187\",\"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/fix/getting-started-typos/_next/static/I74vOXE4Lfx0IqHjERyu5/_buildManifest.js b/docs/fix/getting-started-typos/_next/static/pHmwgQ4VJcpoaiAI8qcdd/_buildManifest.js
similarity index 100%
rename from docs/fix/getting-started-typos/_next/static/I74vOXE4Lfx0IqHjERyu5/_buildManifest.js
rename to docs/fix/getting-started-typos/_next/static/pHmwgQ4VJcpoaiAI8qcdd/_buildManifest.js
diff --git a/docs/fix/getting-started-typos/_next/static/I74vOXE4Lfx0IqHjERyu5/_ssgManifest.js b/docs/fix/getting-started-typos/_next/static/pHmwgQ4VJcpoaiAI8qcdd/_ssgManifest.js
similarity index 100%
rename from docs/fix/getting-started-typos/_next/static/I74vOXE4Lfx0IqHjERyu5/_ssgManifest.js
rename to docs/fix/getting-started-typos/_next/static/pHmwgQ4VJcpoaiAI8qcdd/_ssgManifest.js
diff --git a/docs/fix/getting-started-typos/index.html b/docs/fix/getting-started-typos/index.html
index d401bcfaf3..d54edc79f3 100644
--- a/docs/fix/getting-started-typos/index.html
+++ b/docs/fix/getting-started-typos/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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"I74vOXE4Lfx0IqHjERyu5\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"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-get-started/installation;307;\"}\n"])</script><script>self.__next_f.push([1,"a:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nb:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\nc:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\nd:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\ne:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\nf:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n23:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n24:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\""])</script><script>self.__next_f.push([1,"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n25:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n26:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n27:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n28:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n29:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14a:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n182:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\""])</script><script>self.__next_f.push([1,",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n183:I[68648,[],\"\"]\n184:I[91385,[],\"\"]\n10:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"13:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n14: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,"15: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,"16:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n17: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"])</script><script>self.__next_f.push([1,"\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;\n18: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;\n19:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1a:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1b:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n1c:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n1d:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1e:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\n21:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2b:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2d:{}\n2a:{\"compiledSource\":\"$2b\",\"frontmatter\":\"$2c\",\"scope\":\"$2d\"}\n2e:{}\n2f:[\"01-get-started\",\"installation\"]\n31:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nKomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"32:{}\n33:{}\n30:{\"compiledSource\":\"$31\",\"frontmatter\":\"$32\",\"scope\":\"$33\"}\n34:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n35:[\"01-get-started\",\"stylesheet\"]\n37:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"38:{}\n39:{}\n36:{\"compiledSource\":\"$37\",\"frontmatter\":\"$38\",\"scope\":\"$39\"}\n3a:{}\n3b:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n3d:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3e:{}\n3c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n3f:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n40:[\"03-components\",\"actions\",\"action-group\"]\n42:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n43:{}\n41:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n45:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n44:{\"confirmation\":\"$45\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n46:[\"03-components\",\"actions\",\"action\"]\n48:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n49:{}\n47:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$48\",\"scope\":\"$49\"}\n"])</script><script>self.__next_f.push([1,"4a:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4b:[\"03-components\",\"actions\",\"button\"]\n4d:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n4e:{}\n4c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"50:[\"03-components\",\"actions\",\"context-menu\"]\n52:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n53:{}\n51:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$52\",\"scope\":\"$53\"}\n54:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n55:[\"03-components\",\"actions\",\"copy-button\"]\n57:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n58:{}\n56:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$57\",\"scope\":\"$58\"}\n59:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5a:[\"03-components\",\"content\",\"avatar\"]\n5c:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n5d:{}\n5b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n5f:[\"03-components\",\"content\",\"heading\"]\n61:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n62:{}\n60:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n64: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,"65: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,"63:{\"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\":\"$64\",\"functional\":\"$65\",\"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\\nexport default () =\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,"66:[\"03-components\",\"content\",\"icon\"]\n68:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n69:{}\n67:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$68\",\"scope\":\"$69\"}\n6a:{\"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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6b:[\"03-components\",\"content\",\"illustrated-message\"]\n6d:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n6e:{}\n6c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6d\",\"scope\":\"$6e\"}\n6f:{\"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\"}\n70:[\"03-components\",\"content\",\"image\"]\n72:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$72\",\"scope\":\"$73\"}\n74:{\"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\"}\n75:[\"03-components\",\"content\",\"inline-code\"]\n77:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n78:{}\n76:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"label\"]\n7c:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n7d:{}\n7b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n7f:[\"03-components\",\"content\",\"labeled-value\"]\n81:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n82:{}\n80:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"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\"}\n84:[\"03-components\",\"content\",\"skeleton\"]\n86:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n87:{}\n85:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"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\"}\n89:[\"03-components\",\"content\",\"text\"]\n8b:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n8c:{}\n8a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8b\",\"scope\":\"$8c\"}\n8d:{\"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\"}\n8e:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n90:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n91:{}\n8f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$90\",\"scope\":\"$91\"}\n92:{\"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\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n95:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$95\",\"scope\":\"$96\"}\n97:{\"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\"}\n98:[\"03-components\",\"form-controls\",\"checkbox\"]\n9a:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9b:{}\n99:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\n9d:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\n9f:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na0:{}\n9e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9f\",\"scope\":\"$a0\"}\na2:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na1:{\"default\":\"$a2\"}\na3:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na5:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\na6:{}\na4:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a5\",\"scope\":\"$a6\"}\na7:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\na8:[\"03-components\",\"form-controls\",\"number-field\"]\naa:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\nab:{}\na9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$aa\",\"scope\":\"$ab\"}\n"])</script><script>self.__next_f.push([1,"ac:{\"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,"ad:[\"03-components\",\"form-controls\",\"radio-group\"]\naf:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb0:{}\nae:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$af\",\"scope\":\"$b0\"}\nb1:{\"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\"}\nb2:[\"03-components\",\"form-controls\",\"select\"]\nb4:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb5:{}\nb3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b4\",\"scope\":\"$b5\"}\nb6:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nb7:[\"03-components\",\"form-controls\",\"slider\"]\nb9:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nba:{}\nb8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b9\",\"scope\":\"$ba\"}\nbb:{\"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\"}\nbc:[\"03-components\",\"form-controls\",\"switch\"]\nbe:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nbf:{}\nbd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$be\",\"scope\":\"$bf\"}\nc0:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc1:[\"03-components\",\"form-controls\",\"text-area\"]\nc3:{\"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.\"}\nc4:{}\nc2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c3\",\"scope\":\"$c4\"}\n"])</script><script>self.__next_f.push([1,"c5:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c6:[\"03-components\",\"form-controls\",\"text-field\"]\nc8:{\"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.\"}\nc9:{}\nc7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nca:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncb:[\"03-components\",\"navigation\",\"breadcrumb\"]\ncd:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nce:{}\ncc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cd\",\"scope\":\"$ce\"}\nd0: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  "])</script><script>self.__next_f.push([1,"\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;\ncf:{\"contextMenu\":\"$d0\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd1:[\"03-components\",\"navigation\",\"header-navigation\"]\nd3:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd4:{}\nd2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d3\",\"scope\":\"$d4\"}\nd5:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nd6:[\"03-components\",\"navigation\",\"link\"]\nd8:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd9:{}\nd7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"da:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"db:[\"03-components\",\"navigation\",\"navigation\"]\ndd:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nde:{}\ndc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ndf:{\"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\":\"$e0\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne1:[\"03-components\",\"navigation\",\"tabs\"]\ne3:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne4:{}\ne2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\ne6:[\"03-components\",\"overlays\",\"contextual-help\"]\ne8:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ne9:{}\ne7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\neb:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nec:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nea:{\"default\":\"$eb\",\"offCanvas\":\"$ec\"}\ned:[\"03-components\",\"overlays\",\"modal\"]\nef:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf0:{}\nee:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf2:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf1:{\"default\":\"$f2\"}\nf3:[\"03-components\",\"overlays\",\"off-canvas\"]\nf5:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nf6:{}\nf4:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f5\",\"scope\":\"$f6\"}\nf7:{\"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\"}\nf8:[\"03-components\",\"overlays\",\"tooltip\"]\nfa:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nfb:{}\nf9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fa\",\"scope\":\"$fb\"}\nfc:{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\nfd:[\"03-components\",\"status\",\"counter-label\"]\nff:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n100:{}\nfe:{\"compiledSource\":\"\\\"use strict\\\";\\n"])</script><script>self.__next_f.push([1,"const {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ff\",\"scope\":\"$100\"}\n102: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  \u003cInlineAler"])</script><script>self.__next_f.push([1,"t 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;\n101:{\"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\":\"$102\",\"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\"}\n103:[\"03-components\",\"status\",\"inline-alert\"]\n105:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n106:{}\n104:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, c"])</script><script>self.__next_f.push([1,"omponent) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$105\",\"scope\":\"$106\"}\n107:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n108:[\"03-components\",\"status\",\"loading-spinner\"]\n10a:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10b:{}\n109:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"10c:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"10d:[\"03-components\",\"status\",\"notification-provider\"]\n10f:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n110:{}\n10e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10f\",\"scope\":\"$110\"}\n111:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n112:[\"03-components\",\"status\",\"notification\"]\n114:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n115:{}\n113:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$114\",\"scope\":\"$115\"}\n116:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n117:[\"03-components\",\"status\",\"progress-bar\"]\n119:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11a:{}\n118:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$119\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11a\"}\n11b:{\"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\"}\n11c:[\"03-components\",\"status\",\"status-badge\"]\n11e:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n11f:{}\n11d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11e\",\"scope\":\"$11f\"}\n120:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n121:[\"03-components\",\"status\",\"status-icon\"]\n123:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n124:{}\n122:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$123\",\"scope\":\"$124\"}\n125:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n126:[\"03-components\",\"structure\",\"accordion\"]\n128:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n129:{}\n127:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$128\",\"scope\":\"$129\"}\n12a:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12b:[\"03-components\",\"structure\",\"column-layout\"]\n12d:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n12e:{}\n12c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12d\",\"scope\":\"$12e\"}\n12f:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n130:[\"03-components\",\"structure\",\"layout-card\"]\n132:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n133:{}\n131:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$132\",\"scope\":\"$133\"}\n135:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n136:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n137:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n134:{\"default\":\"$135\",\"main\":\"$136\",\"withLink\":\"$137\"}\n138:[\"03-components\",\"structure\",\"list\"]\n13a:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13b:{}\n139:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13a\",\"scope\":\"$13b\"}\n13d: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;\n13c:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$13d\",\"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\"}\n13e:[\"03-components\",\"structure\",\"section\"]\n140:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n141:{}\n13f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$140\",\"scope\":\"$141\"}\n142:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n143:[\"03-components\",\"structure\",\"separator\"]\n145:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n146:{}\n144:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$145\",\"scope\":\"$146\"}\n148:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n147:{\"default\":\"$148\"}\n149:[\"03-components\",\"structure\",\"table\"]\n14c:{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-get-started/installation/index.mdx\"}\n14d:{\"mdxSource\":\"$30\",\"examples\":\"$34\",\"slugs\":\"$35\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n14e:{\"mdxSource\":\"$36\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n14f:{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n150:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$46\",\"filename\":\"03-components/actions/action/index.mdx\"}\n151:{\"mdxSource\":\"$47\",\"examples\":\"$4a\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/button/index.mdx\"}\n152:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n153:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n154:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n155:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/heading/index.mdx\"}\n156:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$66\",\"filename\":\"03-components/content/icon/index.mdx\"}\n157:{\"mdxSource\":\"$67\",\"examples\":\"$6a\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n158:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/image/index.mdx\"}\n159:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15a:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/label/index.mdx\"}\n15b:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n15c:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n15d:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/text/index.mdx\"}\n15e:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n15f:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n160:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n161:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n162:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n163:{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n164:{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n165:{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n166:{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n167:{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n168:{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n169:{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c6\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16a:{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16b:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n16c:{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d6\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n16d:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n16e:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n16f:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n170:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n171:{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f3\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n172:{\"mdxSource\":\"$f4\",\"examples\":\"$f7\",\"slugs\":\"$f8\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n173:{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n174:{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$103\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n175:{\"mdxSource\":\"$104\",\"examples\":\"$107\",\"slugs\":\"$108\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n176:{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10d\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n177:{\"mdxSource\":\"$10e\",\"examples\":\"$111\",\"slugs\":\"$112\",\"filename\":\"03-components/status/notification"])</script><script>self.__next_f.push([1,"/index.mdx\"}\n178:{\"mdxSource\":\"$113\",\"examples\":\"$116\",\"slugs\":\"$117\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n179:{\"mdxSource\":\"$118\",\"examples\":\"$11b\",\"slugs\":\"$11c\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17a:{\"mdxSource\":\"$11d\",\"examples\":\"$120\",\"slugs\":\"$121\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17b:{\"mdxSource\":\"$122\",\"examples\":\"$125\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n17c:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12b\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n17d:{\"mdxSource\":\"$12c\",\"examples\":\"$12f\",\"slugs\":\"$130\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n17e:{\"mdxSource\":\"$131\",\"examples\":\"$134\",\"slugs\":\"$138\",\"filename\":\"03-components/structure/list/index.mdx\"}\n17f:{\"mdxSource\":\"$139\",\"examples\":\"$13c\",\"slugs\":\"$13e\",\"filename\":\"03-components/structure/section/index.mdx\"}\n180:{\"mdxSource\":\"$13f\",\"examples\":\"$142\",\"slugs\":\"$143\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n181:{\"mdxSource\":\"$144\",\"examples\":\"$147\",\"slugs\":\"$149\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14b:[\"$14c\",\"$14d\",\"$14e\",\"$14f\",\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\"]\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\":[\"$\",\"$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-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$11\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$12\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$13\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$14\",\"functional\":\"$15\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$16\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$19\",\"offCanvas\":\"$1a\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"main\":\"$1e\",\"withLink\":\"$1f\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$21\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"$L24\",null,{\"children\":[[\"$\",\"$L25\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L26\",null,{}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L28\",null,{\"children\":\"Menü\"}],[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"docs\":[{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$34\",\"slugs\":\"$35\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$46\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$47\",\"examples\":\"$4a\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$66\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$67\",\"examples\":\"$6a\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c6\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d6\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f3\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f4\",\"examples\":\"$f7\",\"slugs\":\"$f8\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$103\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$104\",\"examples\":\"$107\",\"slugs\":\"$108\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10d\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10e\",\"examples\":\"$111\",\"slugs\":\"$112\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$113\",\"examples\":\"$116\",\"slugs\":\"$117\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$118\",\"examples\":\"$11b\",\"slugs\":\"$11c\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11d\",\"examples\":\"$120\",\"slugs\":\"$121\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$122\",\"examples\":\"$125\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12b\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12c\",\"examples\":\"$12f\",\"slugs\":\"$130\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$131\",\"examples\":\"$134\",\"slugs\":\"$138\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$139\",\"examples\":\"$13c\",\"slugs\":\"$13e\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$13f\",\"examples\":\"$142\",\"slugs\":\"$143\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$144\",\"examples\":\"$147\",\"slugs\":\"$149\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14a\",null,{\"docs\":\"$14b\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L182\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14a\",null,{\"docs\":[{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$34\",\"slugs\":\"$35\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$46\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$47\",\"examples\":\"$4a\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$66\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$67\",\"examples\":\"$6a\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c6\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d6\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f3\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f4\",\"examples\":\"$f7\",\"slugs\":\"$f8\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$103\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$104\",\"examples\":\"$107\",\"slugs\":\"$108\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10d\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10e\",\"examples\":\"$111\",\"slugs\":\"$112\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$113\",\"examples\":\"$116\",\"slugs\":\"$117\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$118\",\"examples\":\"$11b\",\"slugs\":\"$11c\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11d\",\"examples\":\"$120\",\"slugs\":\"$121\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$122\",\"examples\":\"$125\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12b\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12c\",\"examples\":\"$12f\",\"slugs\":\"$130\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$131\",\"examples\":\"$134\",\"slugs\":\"$138\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$139\",\"examples\":\"$13c\",\"slugs\":\"$13e\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$13f\",\"examples\":\"$142\",\"slugs\":\"$143\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$144\",\"examples\":\"$147\",\"slugs\":\"$149\",\"filename\":\"03-components/structure/table/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L183\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L184\",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/fix/getting-started-typos/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/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.js"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/9b0ae93a-09800d29410c0db0.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/927-5ca83b5a08e1f02b.js" async=""></script><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow-previews/docs/fix/getting-started-typos/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script src="/flow-previews/docs/fix/getting-started-typos/_next/static/chunks/webpack-2155b97b30898a6b.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"style\"]\n2:HL[\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.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/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"pHmwgQ4VJcpoaiAI8qcdd\",\"assetPrefix\":\"/flow-previews/docs/fix/getting-started-typos\",\"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-get-started/installation;307;\"}\n"])</script><script>self.__next_f.push([1,"a:I[18012,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"LinkProvider\"]\nb:I[3842,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"NotificationProvider\"]\nc:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMittwald\"]\nd:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\ne:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\nf:I[28132,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n22:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"HeaderNavigation\"]\n23:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Content\"]\n24:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\""])</script><script>self.__next_f.push([1,"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvasTrigger\"]\n25:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"Button\"]\n26:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"IconMenu\"]\n27:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"OffCanvas\"]\n28:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Heading\"]\n29:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"Section\"]\n14a:I[5621,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\",\"185\",\"static/chunks/app/layout-8c08f2580031bd75.js\"],\"default\"]\n182:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"31\",\"static/chunks/31-60a27d528d24ff6b.js\",\"275\",\"static/chunks/275-c070d0d00f53bea8.js\",\"734\",\"static/chunks/734-1ddf77695347dca0.js\""])</script><script>self.__next_f.push([1,",\"877\",\"static/chunks/app/%5B...slug%5D/page-bd0d47c56e31c299.js\"],\"default\"]\n183:I[68648,[],\"\"]\n184:I[91385,[],\"\"]\n10:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"13:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-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 ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n14: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,"15: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,"16:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\n17: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"])</script><script>self.__next_f.push([1,"\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;\n18: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;\n19:T5bb,import Modal, {"])</script><script>self.__next_f.push([1,"\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1a:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport"])</script><script>self.__next_f.push([1," { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1b:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n    \u003cSection\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/OffCanvasTrigger\u003e;\n1c:T513,import InlineAlert from \"@mittwald/flow-react"])</script><script>self.__next_f.push([1,"-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;\n1d:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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  \u003cListFilte"])</script><script>self.__next_f.push([1,"r\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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1e:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBad"])</script><script>self.__next_f.push([1,"ge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n1f:T56c,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n20: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  \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\n21:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/Table\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n2b:Tbd8,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Content, Heading, InlineAlert} = _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, dass 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2d:{}\n2a:{\"compiledSource\":\"$2b\",\"frontmatter\":\"$2c\",\"scope\":\"$2d\"}\n2e:{}\n2f:[\"01-get-started\",\"installation\"]\n31:T1887,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    code: \"code\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    p: \"p\",\n    pre: \"pre\",\n    strong: \"strong\",\n    ..._provideComponents(),\n    ...props.components\n  }, {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,\\nkomponentenbasierten 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} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"32:{}\n33:{}\n30:{\"compiledSource\":\"$31\",\"frontmatter\":\"$32\",\"scope\":\"$33\"}\n34:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"}\n35:[\"01-get-started\",\"stylesheet\"]\n37:T265c,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = {\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    hr: \"hr\",\n    li: \"li\",\n    p: \"p\",\n    ul: \"ul\",\n    ..._provideComponents(),\n    ...props.components\n  }, {Do, DoAndDont, Dont} = _components;\n  if (!Do) _missingMdxReference(\"Do\", true);\n  if (!DoAndDont) _missingMdxReference(\"DoAndDont\", true);\n  if (!Dont) _missingMdxReference(\"Dont\", true);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.h2, {\n      children: \"Best Practices\"\n    }), \"\\n\", _jsxs(_components.ul, {\n      children: [\"\\n\", _jsx(_components.li, {\n        children: \"Platziere Fehlermeldungen in unmittelbarer Nähe zur Ursache des Problems.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Stelle sicher, dass Fehlermeldungen kurz, verständlich, hilfreich und\\nhandlungsorientiert sind.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Versuche bei jeder Fehlermeldung eine Lösung zu kommunizieren.\"\n      }), \"\\n\", _jsx(_components.li, {\n        children: \"Unterscheide verschiedene Arten von Fehlermeldungen, basierend auf ihrem\\nUmfang und ihrer Dringlichkeit.\"\n      }), \"\\n\"]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Grundlagen\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Kurz und hilfreich\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sollten kurz, sinnvoll und hilfreich für den Nutzer sein. Es\\ngilt: So kurz wie möglich, aber so lang wie nötig. Das bedeutet allerdings auch,\\ndass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format\\nname@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Bitte gib eine E-Mail-Adresse im Format name@domain.de ein.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Verständliche Sprache, keine Fachsprache\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Vermeide technische Begriffe und konzentriere dich auf eine einfach\\nverständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist\\nund wie sie das Problem lösen können.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehlercode 503: Verbindung zum Server fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Schuldzuweisungen vermeiden\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Ein Fehler an sich ist bereits unangenehm und frustrierend. Daher sollte die\\nFehlermeldung dem Nutzer das Gefühl von Unterstützung und Fürsorge vermitteln,\\nanstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärken.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche\\nes erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Fehler eingestehen, Verständnis erleichtern\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen sind einfacher zu verstehen, wenn sie sich auf das System als\\n\\\"wir\\\" und den Nutzer als \\\"du\\\" beziehen. So werden die Fragen \\\"Wo ist etwas\\nschiefgegangen?\\\" und \\\"Wer muss handeln, um es zu beheben?\\\" einfach und\\nverständlich beantwortet.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse\\nund versuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Keine ungerechtfertigten Entschuldigungen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Entschuldige dich nicht für kleine Fehler. Dies kann Fehler oft schlimmer\\nerscheinen lassen und vom wichtigen Teil der Nachricht ablenken.\\nEntschuldigungen sollten für ernsthafte Fehler aufgespart werden, wie den\\nVerlust von Daten oder wenn der Nutzer eine größere Aktion zur Behebung des\\nProblems ausführen muss.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsxs(Dont, {\n        exampleText: \"Es tut uns leid, wir unterstützen das Dateiformat nicht.\",\n        children: [_jsx(_components.h4, {\n          children: \"Don't\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld\\nträgt.\"\n        })]\n      }), _jsxs(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: [_jsx(_components.h4, {\n          children: \"Do\"\n        }), _jsx(_components.p, {\n          children: \"Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.\"\n        })]\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Wahrscheinlichsten Fehler nennen\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Wenn ein Fehler genau eine Ursache hat, dann erkläre, wie der Fehler zu beheben\\nist. Gibt es mehrere mögliche Gründe, so sollte die Fehlermeldung beschreiben,\\nwie der wahrscheinlichste Grund zu beheben ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle\\nsicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und\\nein Sonderzeichen enthält.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Dein Passwort muss mindestens 8 Zeichen enthalten.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Nicht zu spezifisch\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Formuliere Fehlermeldungen lieber etwas allgemeiner als zu spezifisch. Oft ist\\nes nicht erforderlich, spezifische Details wie Dateinamen, Benutzernamen oder\\nOrdner zu nennen, da der Nutzer diese Informationen an anderen Stellen in der\\nBenutzeroberfläche finden kann.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende\\neine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Aktiv schreiben\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Es werden nur Dateien vom Typ XY unterstützt.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Wir unterstützen nur Dateien vom Typ XY.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Positiv formulieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Versuche, Fehlermeldungen positiv zu formulieren und auf negativ besetzte\\nBegriffe (z.B. Fehler, Problem, fehlgeschlagen, falsch, ungültig, verboten, ...)\\nzu verzichten. Konzentriere dich stattdessen auf die Lösung und was als nächstes\\ngetan werden kann. Beachte jedoch, dass dies in Fällen von Systemfehlern, für\\ndie es keine direkte Lösung gibt, nicht immer möglich ist.\"\n    }), \"\\n\", _jsxs(DoAndDont, {\n      children: [_jsx(Dont, {\n        exampleText: \"Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.\",\n        children: _jsx(_components.h4, {\n          children: \"Don't\"\n        })\n      }), _jsx(Do, {\n        exampleText: \"Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte\\nversuche es erneut.\",\n        children: _jsx(_components.h4, {\n          children: \"Do\"\n        })\n      })]\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"38:{}\n39:{}\n36:{\"compiledSource\":\"$37\",\"frontmatter\":\"$38\",\"scope\":\"$39\"}\n3a:{}\n3b:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n3d:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n3e:{}\n3c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n3f:{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"danger\\\"\u003eProjekt löschen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e"])</script><script>self.__next_f.push([1,"\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"}\n40:[\"03-components\",\"actions\",\"action-group\"]\n42:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n43:{}\n41:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n45:T412,import Button from \"@mittwald/flow-react-components/Button\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Modal } from \"@mittwald/flow-reac"])</script><script>self.__next_f.push([1,"t-components/Modal\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\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    \u003cActionGroup\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/ActionGroup\u003e\n  \u003c/Modal\u003e\n  \u003cButton color=\"secondary\" variant=\"soft\"\u003e\n    Projekt löschen\n  \u003c/Button\u003e\n\u003c/Action\u003e;\n44:{\"confirmation\":\"$45\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"}\n46:[\"03-components\",\"actions\",\"action\"]\n48:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n49:{}\n47:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...pr"])</script><script>self.__next_f.push([1,"ops.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$48\",\"scope\":\"$49\"}\n"])</script><script>self.__next_f.push([1,"4a:{\"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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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,"4b:[\"03-components\",\"actions\",\"button\"]\n4d:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n4e:{}\n4c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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,"50:[\"03-components\",\"actions\",\"context-menu\"]\n52:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n53:{}\n51:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$52\",\"scope\":\"$53\"}\n54:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n55:[\"03-components\",\"actions\",\"copy-button\"]\n57:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n58:{}\n56:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children:"])</script><script>self.__next_f.push([1," _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$57\",\"scope\":\"$58\"}\n59:{\"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\\"])</script><script>self.__next_f.push([1,"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\"}\n5a:[\"03-components\",\"content\",\"avatar\"]\n5c:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n5d:{}\n5b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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 \\\"@mittwal"])</script><script>self.__next_f.push([1,"d/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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"}\n5f:[\"03-components\",\"content\",\"heading\"]\n61:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n62:{}\n60:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n64: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,"65: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,"63:{\"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\":\"$64\",\"functional\":\"$65\",\"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\\nexport default () =\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,"66:[\"03-components\",\"content\",\"icon\"]\n68:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n69:{}\n67:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$68\",\"scope\":\"$69\"}\n6a:{\"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\\\";\\nimpo"])</script><script>self.__next_f.push([1,"rt 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\"}\n6b:[\"03-components\",\"content\",\"illustrated-message\"]\n6d:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n6e:{}\n6c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6d\",\"scope\":\"$6e\"}\n6f:{\"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\"}\n70:[\"03-components\",\"content\",\"image\"]\n72:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _cr"])</script><script>self.__next_f.push([1,"eateMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$72\",\"scope\":\"$73\"}\n74:{\"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\"}\n75:[\"03-components\",\"content\",\"inline-code\"]\n77:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n78:{}\n76:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\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}\\n\",\"frontmatter\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"label\"]\n7c:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n7d:{}\n7b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"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-"])</script><script>self.__next_f.push([1,"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\"}\n7f:[\"03-components\",\"content\",\"labeled-value\"]\n81:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n82:{}\n80:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"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\"}\n84:[\"03-components\",\"content\",\"skeleton\"]\n86:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n87:{}\n85:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"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\"}\n89:[\"03-components\",\"content\",\"text\"]\n8b:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n8c:{}\n8a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8b\",\"scope\":\"$8c\"}\n8d:{\"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\"}\n8e:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n90:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n91:{}\n8f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };"])</script><script>self.__next_f.push([1,"\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$90\",\"scope\":\"$91\"}\n92:{\"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\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n95:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {"])</script><script>self.__next_f.push([1,"\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$95\",\"scope\":\"$96\"}\n97:{\"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\"}\n98:[\"03-components\",\"form-controls\",\"checkbox\"]\n9a:{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"}\n9b:{}\n99:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if"])</script><script>self.__next_f.push([1," (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for "])</script><script>self.__next_f.push([1,"name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"}\n9d:[\"03-components\",\"form-controls\",\"field-react-hook-form\"]\n9f:{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"}\na0:{}\n9e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9f\",\"scope\":\"$a0\"}\na2:T4f4,import { useForm } from \"react-hook-form\";\nimport {\n  Field,\n  Form,\n} from \"@mittwald/flow-react-components/react-hook-form\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { Button } from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Button\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport { FieldDescription } from \"@mittwald/flow-react-components/FieldDescription\";\n\nexport default () =\u003e {\n  interface Values {\n    name: string;\n  }\n  const form = useForm\u003cValues\u003e();\n\n  const handleOnSubmit = (values: Values) =\u003e\n    alert(JSON.stringify(values));\n\n  return (\n    \u003cForm form={form} onSubmit={handleOnSubmit}\u003e\n      \u003cSection\u003e\n        \u003cField\n          name=\"name\"\n          rules={{\n            required: \"The project name is required\",\n          }}\n        \u003e\n          \u003cTextField\u003e\n            \u003cLabel\u003eName\u003c/Label\u003e\n            \u003cFieldDescription\u003e\n              The name of the project\n            \u003c/FieldDescription\u003e\n          \u003c/TextField\u003e\n        \u003c/Field\u003e\n        \u003cActionGroup\u003e\n          \u003cButton type=\"submit\"\u003eSave\u003c/Button\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Section\u003e\n    \u003c/Form\u003e\n  );\n};\na1:{\"default\":\"$a2\"}\na3:[\"03-components\",\"form-controls\",\"form-react-hook-form\"]\na5:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\na6:{}\na4:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a5\",\"scope\":\"$a6\"}\na7:{\"defau"])</script><script>self.__next_f.push([1,"lt\":\"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\"}\na8:[\"03-components\",\"form-controls\",\"number-field\"]\naa:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\nab:{}\na9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled"])</script><script>self.__next_f.push([1,": true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$aa\",\"scope\":\"$ab\"}\n"])</script><script>self.__next_f.push([1,"ac:{\"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,"ad:[\"03-components\",\"form-controls\",\"radio-group\"]\naf:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\nb0:{}\nae:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$af\",\"scope\":\"$b0\"}\nb1:{\"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\"}\nb2:[\"03-components\",\"form-controls\",\"select\"]\nb4:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\nb5:{}\nb3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b4\",\"scope\":\"$b5\"}\nb6:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"}\nb7:[\"03-components\",\"form-controls\",\"slider\"]\nb9:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\"}\nba:{}\nb8:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (c"])</script><script>self.__next_f.push([1,"omponent ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$b9\",\"scope\":\"$ba\"}\nbb:{\"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\"}\nbc:[\"03-components\",\"form-controls\",\"switch\"]\nbe:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\nbf:{}\nbd:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$be\",\"scope\":\"$bf\"}\nc0:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nim"])</script><script>self.__next_f.push([1,"port 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\"}\nc1:[\"03-components\",\"form-controls\",\"text-area\"]\nc3:{\"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.\"}\nc4:{}\nc2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _creat"])</script><script>self.__next_f.push([1,"eMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c3\",\"scope\":\"$c4\"}\n"])</script><script>self.__next_f.push([1,"c5:{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"c6:[\"03-components\",\"form-controls\",\"text-field\"]\nc8:{\"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.\"}\nc9:{}\nc7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nca:{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps"])</script><script>self.__next_f.push([1,"\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\"}\ncb:[\"03-components\",\"navigation\",\"breadcrumb\"]\ncd:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\nce:{}\ncc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cd\",\"scope\":\"$ce\"}\nd0: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  "])</script><script>self.__next_f.push([1,"\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;\ncf:{\"contextMenu\":\"$d0\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\u003e\\n  \u003cLink href=\\\"#\\\"\u003eGetting start"])</script><script>self.__next_f.push([1,"et\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\"}\nd1:[\"03-components\",\"navigation\",\"header-navigation\"]\nd3:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\nd4:{}\nd2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d3\",\"scope\":\"$d4\"}\nd5:{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\\\";\\n"])</script><script>self.__next_f.push([1,"import 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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"}\nd6:[\"03-components\",\"navigation\",\"link\"]\nd8:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd9:{}\nd7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"da:{\"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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"}\n"])</script><script>self.__next_f.push([1,"db:[\"03-components\",\"navigation\",\"navigation\"]\ndd:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\nde:{}\ndc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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: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    \u003cSec"])</script><script>self.__next_f.push([1,"tion\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;\ndf:{\"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\":\"$e0\",\"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\\"])</script><script>self.__next_f.push([1,"n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"}\ne1:[\"03-components\",\"navigation\",\"tabs\"]\ne3:{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"}\ne4:{}\ne2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Lin"])</script><script>self.__next_f.push([1,"k\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"}\ne6:[\"03-components\",\"overlays\",\"contextual-help\"]\ne8:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ne9:{}\ne7:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\neb:T5bb,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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 "])</script><script>self.__next_f.push([1,"       Eine Organisation kannst du dir wie ein Unternehmen\n        vorstellen. An diesem Ort verwaltest du deine\n        Mitarbeiter, Zahlungsmodalitäten und kannst deine\n        Rechnungen einsehen.\n      \u003c/Text\u003e\n      \u003cTextField\u003e\n        \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nec:T5c5,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\n\n\u003cModalTrigger\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    \u003cActionGroup\u003e\n      \u003cAction closeOverlay=\"Modal\"\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          "])</script><script>self.__next_f.push([1,"Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nea:{\"default\":\"$eb\",\"offCanvas\":\"$ec\"}\ned:[\"03-components\",\"overlays\",\"modal\"]\nef:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\nf0:{}\nee:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nf2:T44a,import Text from \"@mittwald/flow-react-components/Text\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport OffCanvas, {\n  OffCanvasTrigger,\n} 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\";\n\n\u003cOffCanvasTrigger\u003e\n  \u003cButton\u003e\n    \u003cIconMenu /\u003e\n  \u003c/Button\u003e\n  \u003cOffCanvas\u003e\n    \u003cHeading\u003eMenü\u003c/Heading\u003e\n   "])</script><script>self.__next_f.push([1," \u003cSection\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/OffCanvasTrigger\u003e;\nf1:{\"default\":\"$f2\"}\nf3:[\"03-components\",\"overlays\",\"off-canvas\"]\nf5:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nf6:{}\nf4:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f5\",\"scope\":\"$f6\"}\nf7:{\"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\"}\nf8:[\"03-components\",\"overlays\",\"tooltip\"]\nfa:{\"component\":\"CounterBadge\",\"description\":"])</script><script>self.__next_f.push([1,"\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nfb:{}\nf9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fa\",\"scope\":\"$fb\"}\nfc:{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"}\nfd:[\"03-components\",\"status\",\"counter-label\"]\nff:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\n100:{}\nfe:{\"compiledSource\":\"\\\"use strict\\\";\\n"])</script><script>self.__next_f.push([1,"const {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ff\",\"scope\":\"$100\"}\n102: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  \u003cInlineAler"])</script><script>self.__next_f.push([1,"t 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;\n101:{\"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\":\"$102\",\"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\"}\n103:[\"03-components\",\"status\",\"inline-alert\"]\n105:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\n106:{}\n104:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, c"])</script><script>self.__next_f.push([1,"omponent) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$105\",\"scope\":\"$106\"}\n107:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n108:[\"03-components\",\"status\",\"loading-spinner\"]\n10a:{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"}\n10b:{}\n109:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n"])</script><script>self.__next_f.push([1,"10c:{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"}\n"])</script><script>self.__next_f.push([1,"10d:[\"03-components\",\"status\",\"notification-provider\"]\n10f:{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"}\n110:{}\n10e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10f\",\"scope\":\"$110\"}\n111:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification stat"])</script><script>self.__next_f.push([1,"us=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"}\n112:[\"03-components\",\"status\",\"notification\"]\n114:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n115:{}\n113:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$114\",\"scope\":\"$115\"}\n116:{\"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-componen"])</script><script>self.__next_f.push([1,"ts/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\"}\n117:[\"03-components\",\"status\",\"progress-bar\"]\n119:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n11a:{}\n118:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$119\",\"sco"])</script><script>self.__next_f.push([1,"pe\":\"$11a\"}\n11b:{\"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\"}\n11c:[\"03-components\",\"status\",\"status-badge\"]\n11e:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n11f:{}\n11d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11e\",\"scope\":\"$11f\"}\n120:{\"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=\\\""])</script><script>self.__next_f.push([1,"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n121:[\"03-components\",\"status\",\"status-icon\"]\n123:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n124:{}\n122:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$123\",\"scope\":\"$124\"}\n125:{\"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-compo"])</script><script>self.__next_f.push([1,"nents/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\"}\n126:[\"03-components\",\"structure\",\"accordion\"]\n128:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n129:{}\n127:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$128\",\"scope\":\"$129\"}\n12a:{\"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/Tex"])</script><script>self.__next_f.push([1,"tField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/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\"}\n12b:[\"03-components\",\"structure\",\"column-layout\"]\n12d:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n12e:{}\n12c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12d\",\"scope\":\"$12e\"}\n12f:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n130:[\"03-components\",\"structure\",\"layout-card\"]\n132:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n133:{}\n131:{\"co"])</script><script>self.__next_f.push([1,"mpiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$132\",\"scope\":\"$133\"}\n135:T66f,import List, {\n  ListFilter,\n  ListItem,\n  ListItemView,\n  ListSorting,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar 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      \u003cListIt"])</script><script>self.__next_f.push([1,"em\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n136:T563,import List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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      \u003cListItem\u003e\n        \u003cAvatar variant={domain.type === \"Domain\" ? 1 : 2}\u003e\n          {domain.type === \"Domain\" ? (\n            \u003cIconDomain /\u003e\n          ) : (\n            \u003cIconSubdomain /\u003e\n          )}\n        \u003c/Avatar\u003e\n        \u003cHeading\u003e{domain.hostname}\u003c/Heading\u003e\n        {domain.verified ? (\n          \u003cText\u003e{domain.type}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n137:T56c,import List, {\n  ListItem,"])</script><script>self.__next_f.push([1,"\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/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={5}\u003e\n  \u003cListStaticData data={domains} /\u003e\n  \u003cListItemView\u003cDomain\u003e\u003e\n    {(domain) =\u003e (\n      \u003cListItem 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/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n134:{\"default\":\"$135\",\"main\":\"$136\",\"withLink\":\"$137\"}\n138:[\"03-components\",\"structure\",\"list\"]\n13a:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n13b:{}\n139:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLa"])</script><script>self.__next_f.push([1,"yout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$13a\",\"scope\":\"$13b\"}\n13d: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;\n13c:{\"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    Postfac"])</script><script>self.__next_f.push([1,"h. 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\":\"$13d\",\"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\"}\n13e:[\"03-components\",\"structure\",\"section\"]\n140:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n141:{}\n13f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n   "])</script><script>self.__next_f.push([1," editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$140\",\"scope\":\"$141\"}\n142:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n143:[\"03-components\",\"structure\",\"separator\"]\n145:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n146:{}\n144:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$145\",\"scope\":\"$146\"}\n148:T4c5,import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from \"@mittwald/flow-react-components/T"])</script><script>self.__next_f.push([1,"able\";\nimport { InlineCode } from \"@mittwald/flow-react-components/InlineCode\";\n\n\u003cTable aria-label=\"Button Props\"\u003e\n  \u003cTableHeader\u003e\n    \u003cTableColumn\u003eName\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eType\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDefault\u003c/TableColumn\u003e\n    \u003cTableColumn\u003eDescription\u003c/TableColumn\u003e\n  \u003c/TableHeader\u003e\n  \u003cTableBody\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003ecolor\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003e\n        primary | accent | secondary | danger\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eprimary\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe color of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003evariant\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003eplain | solid | soft\u003c/TableCell\u003e\n      \u003cTableCell\u003esolid\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe variant of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n    \u003cTableRow\u003e\n      \u003cTableCell\u003e\n        \u003cInlineCode\u003esize\u003c/InlineCode\u003e\n      \u003c/TableCell\u003e\n      \u003cTableCell\u003em | s\u003c/TableCell\u003e\n      \u003cTableCell\u003em\u003c/TableCell\u003e\n      \u003cTableCell\u003eThe size of the button\u003c/TableCell\u003e\n    \u003c/TableRow\u003e\n  \u003c/TableBody\u003e\n\u003c/Table\u003e;\n147:{\"default\":\"$148\"}\n149:[\"03-components\",\"structure\",\"table\"]\n14c:{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-get-started/installation/index.mdx\"}\n14d:{\"mdxSource\":\"$30\",\"examples\":\"$34\",\"slugs\":\"$35\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n14e:{\"mdxSource\":\"$36\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n14f:{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n150:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$46\",\"filename\":\"03-components/actions/action/index.mdx\"}\n151:{\"mdxSource\":\"$47\",\"examples\":\"$4a\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/button/index.mdx\"}\n152:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n153:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n154:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n155:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/heading/index.mdx\"}\n156:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$66\",\"filename\":\"03-components/content/icon/index.mdx\"}\n157:{\"mdxSource\":\"$67\",\"examples\":\"$6a\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n158:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/image/index.mdx\"}\n159:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n15a:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/label/index.mdx\"}\n15b:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n15c:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n15d:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/text/index.mdx\"}\n15e:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n15f:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n160:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n161:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"}\n162:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"}\n163:{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n164:{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n165:{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/select/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n166:{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n167:{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n168:{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n169:{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c6\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n16a:{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"}\n16b:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n16c:{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d6\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n16d:{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n16e:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n16f:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"}\n170:{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n171:{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f3\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n172:{\"mdxSource\":\"$f4\",\"examples\":\"$f7\",\"slugs\":\"$f8\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n173:{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n174:{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$103\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n175:{\"mdxSource\":\"$104\",\"examples\":\"$107\",\"slugs\":\"$108\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n176:{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10d\",\"filename\":\"03-components/status/notification-provider/index.mdx\"}\n177:{\"mdxSource\":\"$10e\",\"examples\":\"$111\",\"slugs\":\"$112\",\"filename\":\"03-components/status/notification"])</script><script>self.__next_f.push([1,"/index.mdx\"}\n178:{\"mdxSource\":\"$113\",\"examples\":\"$116\",\"slugs\":\"$117\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n179:{\"mdxSource\":\"$118\",\"examples\":\"$11b\",\"slugs\":\"$11c\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n17a:{\"mdxSource\":\"$11d\",\"examples\":\"$120\",\"slugs\":\"$121\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n17b:{\"mdxSource\":\"$122\",\"examples\":\"$125\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n17c:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12b\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n17d:{\"mdxSource\":\"$12c\",\"examples\":\"$12f\",\"slugs\":\"$130\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n17e:{\"mdxSource\":\"$131\",\"examples\":\"$134\",\"slugs\":\"$138\",\"filename\":\"03-components/structure/list/index.mdx\"}\n17f:{\"mdxSource\":\"$139\",\"examples\":\"$13c\",\"slugs\":\"$13e\",\"filename\":\"03-components/structure/section/index.mdx\"}\n180:{\"mdxSource\":\"$13f\",\"examples\":\"$142\",\"slugs\":\"$143\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n181:{\"mdxSource\":\"$144\",\"examples\":\"$147\",\"slugs\":\"$149\",\"filename\":\"03-components/structure/table/index.mdx\"}\n14b:[\"$14c\",\"$14d\",\"$14e\",\"$14f\",\"$150\",\"$151\",\"$152\",\"$153\",\"$154\",\"$155\",\"$156\",\"$157\",\"$158\",\"$159\",\"$15a\",\"$15b\",\"$15c\",\"$15d\",\"$15e\",\"$15f\",\"$160\",\"$161\",\"$162\",\"$163\",\"$164\",\"$165\",\"$166\",\"$167\",\"$168\",\"$169\",\"$16a\",\"$16b\",\"$16c\",\"$16d\",\"$16e\",\"$16f\",\"$170\",\"$171\",\"$172\",\"$173\",\"$174\",\"$175\",\"$176\",\"$177\",\"$178\",\"$179\",\"$17a\",\"$17b\",\"$17c\",\"$17d\",\"$17e\",\"$17f\",\"$180\",\"$181\"]\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\":[\"$\",\"$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-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$11\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--status-icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--heading--h3 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--accent flow--button--size-s\\\"\u003e\\n  Small Accented Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--accent\\\"\u003e\\n  Accented Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$12\",\"frontmatter\":{},\"scope\":{}},\"examples\":{},\"slugs\":[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"],\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"},\"scope\":{}},\"examples\":{\"additionalSecondary\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton color=\\\"accent\\\"\u003eE-Mail-Addresse anlegen\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\" slot=\\\"secondary\\\"\u003e\\n    Speichern und weitere anlegen\\n  \u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\" variant=\\\"soft\\\"\u003e\\n    Abbrechen\\n  \u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\",\"danger\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"default\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\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/ActionGroup\u003e;\\n\",\"info\":\"import ActionGroup from \\\"@mittwald/flow-react-components/ActionGroup\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cActionGroup\u003e\\n  \u003cButton slot=\\\"primary\\\"\u003eOk\u003c/Button\u003e\\n\u003c/ActionGroup\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action-group\"],\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$13\",\"default\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport Action from \\\"@mittwald/flow-react-components/Action\\\";\\nimport { sleep } from \\\"@/content/03-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\\n  action={() =\u003e {\\n    // do nothing\\n  }}\\n  showFeedback\\n\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/03-components/actions/action/examples/lib\\\";\\n\\n\u003cAction action={sleepLong}\u003e\\n  \u003cButton\u003eSpeichern\u003c/Button\u003e\\n\u003c/Action\u003e;\\n\"},\"slugs\":[\"03-components\",\"actions\",\"action\"],\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"dark\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"dark\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"dark\\\"\u003e\\n    Fortfahren/Aktion\\n  \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\",\"light\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"light\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton variant=\\\"soft\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  \u003cButton variant=\\\"plain\\\" color=\\\"light\\\"\u003e\\n    Fortfahren/Aktion\\n  \u003c/Button\u003e\\n  ;\\n\u003c/Row\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\":[\"03-components\",\"actions\",\"button\"],\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import ContextMenu, {\\n  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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cSeparator /\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\",\"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\":[\"03-components\",\"actions\",\"context-menu\"],\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"actions\",\"copy-button\"],\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"avatar\"],\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"dark\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\",\"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\",\"light\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cHeading color=\\\"light\\\"\u003eDas ist eine Überschrift\u003c/Heading\u003e;\\n\"},\"slugs\":[\"03-components\",\"content\",\"heading\"],\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$14\",\"functional\":\"$15\",\"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\\nexport default () =\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\":[\"03-components\",\"content\",\"icon\"],\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"illustrated-message\"],\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"image\"],\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"inline-code\"],\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"label\"],\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"labeled-value\"],\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"skeleton\"],\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"content\",\"text\"],\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-button\"],\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox-group\"],\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"checkbox\"],\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Field\",\"title\":\"Field (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Field/Field.tsx\",\"description\":\"Die Field Komponente \\\"verbindet\\\" Flow Eingabefelder mit React Hook Form.\"},\"scope\":{}},\"examples\":{\"default\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Field,\\n  Form,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\nimport { FieldDescription } from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    name: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField\\n        name=\\\"name\\\"\\n        rules={{\\n          required: \\\"The project name is required\\\",\\n        }}\\n      \u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n          \u003cFieldDescription\u003e\\n            The name of the project\\n          \u003c/FieldDescription\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\",\"typed-field\":\"import { useForm } from \\\"react-hook-form\\\";\\nimport {\\n  Form,\\n  typedField,\\n} from \\\"@mittwald/flow-react-components/react-hook-form\\\";\\nimport { TextField } from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { Label } from \\\"@mittwald/flow-react-components/Label\\\";\\n\\nexport default () =\u003e {\\n  interface Values {\\n    myField: string;\\n  }\\n  const form = useForm\u003cValues\u003e();\\n\\n  // Only `myField` is allowed for name prop\\n  const Field = typedField(form);\\n\\n  return (\\n    \u003cForm form={form} onSubmit={console.log}\u003e\\n      \u003cField name=\\\"myField\\\"\u003e\\n        \u003cTextField\u003e\\n          \u003cLabel\u003eName\u003c/Label\u003e\\n        \u003c/TextField\u003e\\n      \u003c/Field\u003e\\n    \u003c/Form\u003e\\n  );\\n};\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"field-react-hook-form\"],\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Form\",\"title\":\"Form (React Hook Form)\",\"gitHubComponentPath\":\"integrations/react-hook-form/components/Form/Form.tsx\",\"description\":\"Die Form Komponente gruppiert Form-Felder und bietet einen Callback für das Abschicken des Formulars an. Diese Komponente ist ausschließlich in Kombintation mit React Hook Form zu verwenden.\"},\"scope\":{}},\"examples\":{\"default\":\"$16\"},\"slugs\":[\"03-components\",\"form-controls\",\"form-react-hook-form\"],\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"number-field\"],\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"radio-group\"],\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"select\"],\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"},\"scope\":{}},\"examples\":{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Slider from \\\"@mittwald/flow-react-components/Slider\\\";\\n\\n\u003cSlider\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  minValue={20}\\n  maxValue={2000}\\n  defaultValue={200}\\n  step={20}\\n  showInitialMarker\\n\u003e\\n  \u003cLabel\u003eStorage\u003c/Label\u003e\\n\u003c/Slider\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"slider\"],\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"form-controls\",\"switch\"],\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextArea from \\\"@mittwald/flow-react-components/TextArea\\\";\\n\\n\u003cTextArea showCharacterCount maxLength={100}\u003e\\n  \u003cLabel\u003eNachricht\u003c/Label\u003e\\n\u003c/TextArea\u003e;\\n\",\"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\":[\"03-components\",\"form-controls\",\"text-area\"],\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"characterCount\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField showCharacterCount maxLength={10}\u003e\\n  \u003cLabel\u003eBenutzername\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"columnLayout\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStraße\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cColumnLayout s={[2, 1]}\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003eStadt\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n    \u003cTextField isRequired\u003e\\n      \u003cLabel\u003ePLZ\u003c/Label\u003e\\n    \u003c/TextField\u003e\\n  \u003c/ColumnLayout\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eLand\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"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\",\"defaultValue\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField defaultValue=\\\"https://mittwald.de\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\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\",\"inputProps\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField name=\\\"email\\\" type=\\\"email\\\"\u003e\\n  \u003cLabel\u003eE-Mail\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\",\"placeholder\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\n\\n\u003cTextField placeholder=\\\"https://\\\"\u003e\\n  \u003cLabel\u003eURL\u003c/Label\u003e\\n\u003c/TextField\u003e;\\n\",\"required\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport { ColumnLayout } from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\n\\n\u003cColumnLayout m={[1, 1]}\u003e\\n  \u003cTextField isRequired\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eURL\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"withoutLabel\":\"import TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cTextField aria-label=\\\"URL\\\"\u003e\\n  \u003cFieldDescription\u003eBeginnt mit https://\u003c/FieldDescription\u003e\\n\u003c/TextField\u003e;\\n\"},\"slugs\":[\"03-components\",\"form-controls\",\"text-field\"],\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"dark\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003eProjekte\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\"\u003eMeine App\u003c/Link\u003e\\n\u003c/Breadcrumb\u003e;\\n\",\"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\",\"light\":\"import Breadcrumb from \\\"@mittwald/flow-react-components/Breadcrumb\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cBreadcrumb color=\\\"light\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\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\":[\"03-components\",\"navigation\",\"breadcrumb\"],\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$17\",\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"dark\\\"\\n\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\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconSearch } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport HeaderNavigation from \\\"@mittwald/flow-react-components/HeaderNavigation\\\";\\n\\n\u003cHeaderNavigation\\n  aria-label=\\\"Header navigation\\\"\\n  color=\\\"light\\\"\\n\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\":[\"03-components\",\"navigation\",\"header-navigation\"],\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":{\"dark\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"dark\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\",\"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\",\"light\":\"import Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cLink href=\\\"#\\\" color=\\\"light\\\"\u003e\\n  Zum Dashboard\\n\u003c/Link\u003e;\\n\"},\"slugs\":[\"03-components\",\"navigation\",\"link\"],\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\",\"separator\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\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\\n  \u003cSeparator /\u003e\\n\\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\"},\"slugs\":[\"03-components\",\"navigation\",\"navigation\"],\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$18\",\"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\":[\"03-components\",\"navigation\",\"tabs\"],\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"ContextualHelp\",\"description\":\"Die ContextualHelp zeigt zusätzliche Informationen in einem Overlay an. Sie wird über den Klick auf einen Button mit Info Icon getriggert.\"},\"scope\":{}},\"examples\":{\"default\":\"import {\\n  ContextualHelp,\\n  ContextualHelpTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextualHelp\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Link } from \\\"@mittwald/flow-react-components/Link\\\";\\nimport { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cContextualHelpTrigger\u003e\\n  \u003cButton /\u003e\\n\\n  \u003cContextualHelp\u003e\\n    \u003cHeading\u003eRechte \u0026 Rollen\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Jedem Benutzer-Profil wird im mStudio je Projekt\\n      und/oder Organisation eine Rolle zugewiesen. Das\\n      ermöglicht dir ein ganz neues und modernes Arbeiten.\\n    \u003c/Text\u003e\\n    \u003cLink\u003eMehr erfahren\u003c/Link\u003e\\n  \u003c/ContextualHelp\u003e\\n\u003c/ContextualHelpTrigger\u003e;\\n\"},\"slugs\":[\"03-components\",\"overlays\",\"contextual-help\"],\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$19\",\"offCanvas\":\"$1a\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1b\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"overlays\",\"tooltip\"],\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"},\"scope\":{}},\"examples\":{\"default\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={5} /\u003e;\\n\",\"high-number\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge count={120} /\u003e;\\n\",\"with-button\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconNotification } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cButton aria-label=\\\"Benachrichtigungen: 7\\\"\u003e\\n  \u003cIconNotification /\u003e\\n  \u003cCounterBadge count={7} /\u003e\\n\u003c/Button\u003e;\\n\",\"without-content\":\"import CounterBadge from \\\"@mittwald/flow-react-components/CounterBadge\\\";\\n\\n\u003cCounterBadge /\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"counter-label\"],\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1c\",\"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\":[\"03-components\",\"status\",\"inline-alert\"],\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"loading-spinner\"],\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"NotificationProvider\",\"description\":\"Die NotificationProvider dient zur Anzeige und Steuerung von Notifications\"},\"scope\":{}},\"examples\":{\"auto-close\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n            autoClose\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"default\":\"import { Button } from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { useNotificationController } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { Text } from \\\"@mittwald/flow-react-components/Text\\\";\\nimport { Notification } from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\nexport default () =\u003e {\\n  const controller = useNotificationController();\\n\\n  return (\\n    \u003cButton\\n      onPress={() =\u003e\\n        controller.add(\\n          \u003cNotification\\n            onClick={() =\u003e alert(\\\"Notification clicked\\\")}\\n            status=\\\"warning\\\"\\n          \u003e\\n            \u003cHeading\u003eNo SSL certificate\u003c/Heading\u003e\\n            \u003cText\u003e\\n              No SSL certificate could be issued for\\n              examples.de.\\n            \u003c/Text\u003e\\n          \u003c/Notification\u003e,\\n        )\\n      }\\n    \u003e\\n      Trigger Notification\\n    \u003c/Button\u003e\\n  );\\n};\\n\",\"provider\":\"import { NotificationProvider } from \\\"@mittwald/flow-react-components/NotificationProvider\\\";\\n\\n\u003cNotificationProvider\u003eMeine App\u003c/NotificationProvider\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification-provider\"],\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Notification\",\"description\":\"Die Notification dient dazu den User zu benachrichtigen, ohne dessen aktuelle Handlung zu unterbrechen.\"},\"scope\":{}},\"examples\":{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cNotification\u003e\\n  \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n    archiviert.\\n  \u003c/Text\u003e\\n\u003c/Notification\u003e;\\n\",\"status\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Notification from \\\"@mittwald/flow-react-components/Notification\\\";\\n\\n\u003cRow\u003e\\n  \u003cNotification status=\\\"info\\\"\u003e\\n    \u003cHeading\u003eE-Mail-Adresse archiviert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Die E-Mail-Adresse \u003cb\u003eexample@mittwald.de\u003c/b\u003e wurde\\n      archiviert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"warning\\\"\u003e\\n    \u003cHeading\u003eSpeicher fast voll\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Der Speicherplatz im Projekt \u003cb\u003eMy Project\u003c/b\u003e ist zu\\n      80% voll.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"danger\\\"\u003e\\n    \u003cHeading\u003eKein SSL-Zertifikat\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Für \u003cb\u003eexample.de\u003c/b\u003e konnte kein SSL-Zertifikat\\n      ausgestellt werden.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\\n  \u003cNotification status=\\\"success\\\"\u003e\\n    \u003cHeading\u003eApp installiert\u003c/Heading\u003e\\n    \u003cText\u003e\\n      Deine App \u003cb\u003eMy WordPress\u003c/b\u003e wurde erfolgreich\\n      installiert.\\n    \u003c/Text\u003e\\n  \u003c/Notification\u003e\\n\u003c/Row\u003e;\\n\"},\"slugs\":[\"03-components\",\"status\",\"notification\"],\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"progress-bar\"],\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-badge\"],\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"status\",\"status-icon\"],\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"accordion\"],\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"column-layout\"],\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":[\"03-components\",\"structure\",\"layout-card\"],\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$1d\",\"main\":\"$1e\",\"withLink\":\"$1f\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  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\":\"$20\",\"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\":[\"03-components\",\"structure\",\"section\"],\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"},\"scope\":{}},\"examples\":{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"},\"slugs\":[\"03-components\",\"structure\",\"separator\"],\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.6\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"},\"scope\":{}},\"examples\":{\"default\":\"$21\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L22\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"$L24\",null,{\"children\":[[\"$\",\"$L25\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L26\",null,{}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L28\",null,{\"children\":\"Menü\"}],[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"docs\":[{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$34\",\"slugs\":\"$35\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$46\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$47\",\"examples\":\"$4a\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$66\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$67\",\"examples\":\"$6a\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c6\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d6\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f3\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f4\",\"examples\":\"$f7\",\"slugs\":\"$f8\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$103\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$104\",\"examples\":\"$107\",\"slugs\":\"$108\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10d\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10e\",\"examples\":\"$111\",\"slugs\":\"$112\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$113\",\"examples\":\"$116\",\"slugs\":\"$117\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$118\",\"examples\":\"$11b\",\"slugs\":\"$11c\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11d\",\"examples\":\"$120\",\"slugs\":\"$121\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$122\",\"examples\":\"$125\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12b\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12c\",\"examples\":\"$12f\",\"slugs\":\"$130\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$131\",\"examples\":\"$134\",\"slugs\":\"$138\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$139\",\"examples\":\"$13c\",\"slugs\":\"$13e\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$13f\",\"examples\":\"$142\",\"slugs\":\"$143\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$144\",\"examples\":\"$147\",\"slugs\":\"$149\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L14a\",null,{\"docs\":\"$14b\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L182\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L14a\",null,{\"docs\":[{\"mdxSource\":\"$2a\",\"examples\":\"$2e\",\"slugs\":\"$2f\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$30\",\"examples\":\"$34\",\"slugs\":\"$35\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$36\",\"examples\":\"$3a\",\"slugs\":\"$3b\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3c\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$46\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$47\",\"examples\":\"$4a\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$66\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$67\",\"examples\":\"$6a\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/field-react-hook-form/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/form-react-hook-form/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c6\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c7\",\"examples\":\"$ca\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d6\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d7\",\"examples\":\"$da\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e1\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e6\",\"filename\":\"03-components/overlays/contextual-help/index.mdx\"},{\"mdxSource\":\"$e7\",\"examples\":\"$ea\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f3\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$f4\",\"examples\":\"$f7\",\"slugs\":\"$f8\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$103\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$104\",\"examples\":\"$107\",\"slugs\":\"$108\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$109\",\"examples\":\"$10c\",\"slugs\":\"$10d\",\"filename\":\"03-components/status/notification-provider/index.mdx\"},{\"mdxSource\":\"$10e\",\"examples\":\"$111\",\"slugs\":\"$112\",\"filename\":\"03-components/status/notification/index.mdx\"},{\"mdxSource\":\"$113\",\"examples\":\"$116\",\"slugs\":\"$117\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$118\",\"examples\":\"$11b\",\"slugs\":\"$11c\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$11d\",\"examples\":\"$120\",\"slugs\":\"$121\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$122\",\"examples\":\"$125\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12b\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$12c\",\"examples\":\"$12f\",\"slugs\":\"$130\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$131\",\"examples\":\"$134\",\"slugs\":\"$138\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$139\",\"examples\":\"$13c\",\"slugs\":\"$13e\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$13f\",\"examples\":\"$142\",\"slugs\":\"$143\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$144\",\"examples\":\"$147\",\"slugs\":\"$149\",\"filename\":\"03-components/structure/table/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L183\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L184\",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/fix/getting-started-typos/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n4:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/fix/getting-started-typos/index.txt b/docs/fix/getting-started-typos/index.txt
index 3054fb55ca..4f3a97aaba 100644
--- a/docs/fix/getting-started-typos/index.txt
+++ b/docs/fix/getting-started-typos/index.txt
@@ -1,4 +1,4 @@
-0:["I74vOXE4Lfx0IqHjERyu5",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$L3",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L4"]]]]
+0:["pHmwgQ4VJcpoaiAI8qcdd",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$L3",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/cfcb4480d9c1b998.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/fix/getting-started-typos/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L4"]]]]
 2:E{"digest":"NEXT_REDIRECT;replace;01-get-started/installation;307;"}
 5:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"LinkProvider"]
 6:I[3842,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","31","static/chunks/31-60a27d528d24ff6b.js","734","static/chunks/734-1ddf77695347dca0.js","185","static/chunks/app/layout-8c08f2580031bd75.js"],"NotificationProvider"]
@@ -135,7 +135,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {
@@ -1402,7 +1402,7 @@ function _createMdxContent(props) {
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, {
       children: "Anwendung des Stylesheets"
     }), "\n", _jsx(_components.p, {
-      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nKomponentenbasierten und leicht zu verstehendem Schema."
+      children: "Um anfangen zu können, solltest du verstehen, wie die Klassennamen strukturiert\nsind. Die im Stylesheet bereitgestellten Klassennamen folgen einem konsistenten,\nkomponentenbasierten und leicht zu verstehendem Schema."
     }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, {
       children: "Generelle Klassennamen-Auszeichnungen"
     }), "\n", _jsxs(_components.p, {